Eric Belair Eric Belair -3 years ago 116
jQuery Question

How can prefill multiple search columns with their values when returning with stateSave: true?

I am using the jQuery DataTables plug-in (version 1.10.5) with the

stateSave: true
option and custom multiple column search inputs:

$(function(){
$.fn.extend({
myDataTable: function(options){
var $tr = $('<tr></tr>');

$('thead th', this).each(function(){
var $td = $('<td></td>')

var $input = $('<input type="text" placeholder="Search ' + $.trim($(this).text()) + '" />');

$td.append($input);

$tr.append($td);
});

$('thead', this).prepend($tr);

$(this).dataTable(options);

var table = $(this).DataTable();

table.columns().eq(0).each(function(colIdx){
$('input', table.table().header()).eq(colIdx).on('keyup textInput change blur click', function(){
table.column(colIdx).search($(this).val()).draw();
});
});
}
});
});


When leaving the page and returning, the filter is correctly applied, but the values entered into the search inputs are gone. How can I have them pre-filled when returning and using
stateSave: true
?

I have tried using the
fnStateLoaded
callback, but I can't find where the filter values for each column are stored.

Answer Source

I actually came across your question looking for the answer. A bit more searching and I found the right solution. Check out https://odoepner.wordpress.com/2011/12/12/jquery-datatables-column-filters-state-saving/ for the solution.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download