SOLVED: Individual column filters not being restored with bStateSave

ddrake

I'm using fields for individual column filters. The bStateSave feature is working to restore the pagination data, the column sorts and the search field, but the values of the tags for the individual column filters aren't getting restored.

The values are getting stored as aaSearchCols in the cookie, though. They're also being read back in from the cookie, because they are being sent in the AJAX request. The only problem is that the values for the tags are not getting restored. Here's the cookie data:

[code]SpryMedia_DataTables_example_person={
"iCreate":1312655737405,
"iStart":0,
"iEnd":0,
"iLength":10,
"sFilter":"asdf",
"sFilterEsc":true,
"aaSorting":[ [2,"asc"]],
"aaSearchCols":[ ["",true],["",true],["",true],["N",true],["",true]],
"abVisCols":[ false,true,true,true,true]
}; expires=Sat, 06 Aug 2011 20:35:37 GMT; path=/uueugene/; domain=localhost[/code]

Is anyone else having this problem? I'm using v1.8.1. Should I try calling a function in fnStateLoadCallback to restore the values?

I don't know if it makes any difference, but I'm using server-side processing.

Here's my script, in case it helps:
[code] var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bFilter": true,
"bStateSave": true,
"sAjaxSource": "person/get_table_source",
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 0 ] },
],
fnDrawCallback: function() {
clickRowHandler();
},
} );

function clickRowHandler() {
/* Highlight selected row on single click */
$('#example tbody tr').click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).toggleClass('row_selected');
});


$('#example tbody tr').bind('dblclick', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];
editSelectedRow(iId);
});
}
function editSelectedRow(id) {
location.href='person/edit/' + id;
}

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );[/code]


} );

ddrake

One thing that seems odd to me is that in the cookie, ALL 5 columns are set true (which I assume means bSearchable = true). But

[code]"aaSearchCols":[ ["",true],["",true],["",true],["N",true],["",true]],[/code]

But in my aoColumnDefs, I have column 0 set as not searchable (unless I have the syntax wrong)

[code]"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 0 ] },
],[/code]

ddrake

One thing that seems odd to me is that in the cookie, ALL 5 columns are set true (which I assume means bSearchable = true). But

[code]"aaSearchCols":[ ["",true],["",true],["",true],["N",true],["",true]],[/code]

But in my aoColumnDefs, I have column 0 set as not searchable (unless I have the syntax wrong)

[code]"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 0 ] },
],[/code]

Edit: I think aaSearchCols is ok, I see from the source code that the 'true' values are bRegex flags.

ddrake

Stepping through the code around line 6235 after a refresh, I can see that oSettings.aoPreSearchCols is getting populated with the search strings retrieved from the cookie, but the values aren't getting updated. So do I need to write code to set the values of the inputs from aoPreSearchCols?

ddrake

I tried this:

[code]function restoreColumnFilters(oSettings)
{
var inputs = $('#example').find('.search_init').toArray();
for ( var i=0 ; i 0) {
var obj = inputs[i];
obj.value = sVal;
}
}
}[/code]

I tried calling it from fnDrawCallback, because we need to have the table footer present to be able to set the values of the elements -- but -- we don't want to do set anything unless we've just reloaded the settings from the cookie. I tried setting a global boolean in fnStateLoadCallback, then checking it before calling this function and resetting it afterward, but that didn't seem to work...

ddrake

I'm seeing a similar issue with the "Reset Column Filters" plugin. It works fine as far as clearing the ACTUAL individual column filters (i.e. the values stored in the aoPreSearchCols array), but the elements' values are still set to the previous filter values. Is anyone else seeing this?

Edit: I found this thread that helps with clearing inputs on reset: http://www.datatables.net/forums/discussion/3807/reset-column-filters-select/p1

ddrake

Ok, I think I have a workable solution to this:

I added global flag 'isReloadedFromCookies' and a fnStateLoadCallback to the initialization that simply sets the global flag to true. Then in fnDrawCallback, I check to see if the flag is set. If not, I do nothing, but if it is, I reset it and call a function 'restoreFilters()' to restore the values of the input elements and remove their 'search_init' class. I'm new to this, so if anyone can suggest any improvements to this code, it would be welcome...

Here's my working script:
[code]
var asInitVals = new Array();
var isReloadedFromCookies;

$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bFilter": true,
"bStateSave": true,
"aaSorting": [[ 1, "asc" ]], // column 0 is hidden, sort on column 1
"sAjaxSource": "person/get_table_source",
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 0 ] }
],
fnDrawCallback: function(oSettings) {
clickRowHandler();
if (isReloadedFromCookies == true)
{
isReloadedFromCookies = false;
restoreFilters(oSettings);
}
return true;
},
fnStateLoadCallback: function(oSettings) {
isReloadedFromCookies = true;
return true; // if we don't return true here, the reload is cancelled.
}
});

function restoreFilters(oSettings)
{
$('tfoot input').each(function(index) {
if (oSettings.aoPreSearchCols[index].sSearch.length > 0) {
$(this).val(oSettings.aoPreSearchCols[index].sSearch);
$(this).removeClass('search_init');
}
});
}

function clickRowHandler() {
// Highlight selected row on single click
$('#example tbody tr').click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).toggleClass('row_selected');
});
$('#example tbody tr').bind('dblclick', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];
editSelectedRow(iId);
});
$('#clear-filters').click(function(event) {
oTable.fnFilterClear();
$('tfoot').find('input').val('');
});
}

$(document).keyup(function(e) {
if (e.keyCode == 37)
{
alert('previous page');
} else if (e.keyCode == 39){
alert('next page');
}
});

function editSelectedRow(id) {
location.href='person/edit/' + id;
}
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
});
[/code]