Out-of-box State Saving not working

Justindfunk

I'm having issues with basic state saving in 1.9. I have two branches of my code, the only difference between them being the upgrade from 1.8 to 1.9. I have drop down list filters for each of my columns. In the 1.8 version their selections are preserved during page refresh. In the 1.9 version they are not. I'm using server side processing with ajax, which as far as I'm aware shouldn't affect the state save at all, but other than that I'm not doing anything fancy.

allan

Can you give us a link to a test case showing the problem please?

The drop down filters are outside of DataTables core (they must be, since the core doesn't provide that functionality) thus if you want to use the state saved parameters, that must be explicitly coded for (there much have been something doing that before with 1.8 as well so it might be that you just need a parameter renamed or something).

Allan

Justindfunk

Unfortunately it's an internal app that I can't provide a link to.

You're right, forgot that the drop down stuff came from here http://datatables.net/release-datatables/examples/api/multi_filter_select.html. Here's the code that I had to add to reselect the filter on refresh:

[code]
"fnDrawCallback": function() {
var oSettings = oTable.fnSettings();

var columns = $('#lines tfoot th');
columns.each(function(index){
search_string = oSettings.aoPreSearchCols[index].sSearch;
if (search_string !== ""){
$(this).find('select').val(search_string);
}
}
[/code]

When I debug the javascript it works when the datatable filter fires after selecting the drop down value; sSearch has the expected value. However, if I refresh the page, it is empty.

allan

aoPreSearchCols has been renamed aoSearchCols in the state object in 1.9 - which I think is probably the issue here :-)

Allan

Justindfunk

Okay, I poked my nose into the 1.9 js, and I see what you're talking about, but it's also still missing something. aoSearchCols does not exist in the oSettings variable which you can see above is populated from oTable.fnSettings(). aoPreSearchCols on the other hand does still exist in oSettings. I see in _fnLoadState it's referencing oData.aoSearchCols and putting it into oSettings.aoPreSearchCols, with oData being populated with the following call
[code]
var oData = oSettings.fnStateLoad.call( oSettings.oInstance, oSettings );
[/code]
However I just tried to add that line under my var oSettings line shown in my original code, and then change the search_string to populate from oData.aoSearchCols, but oData winds up null.

allan

Yes sorry - I had just assumed you were using the state load callback and didn't read the code properly. I'd suggest trying it with fnStateLoaded in your initialisation object (i.e. populate your values there). Otherwise then yes, aoPreSearchCols is the right thing to do.

Looking at your code again I actually don't fully understand why it doesn't work! If you console.log( oSettings.aoPreSearchCols[index] ) inside the loop - what does that give?

Allan

Justindfunk

here's the console log
Page first loaded:
[code]
Object
bCaseInsensitive: true
bRegex: false
bSmart: true
sSearch: ""
__proto__: Object
[/code]
Drop down choice "03/23/2012" selected, data table processes and returns:
[code]
Object
bCaseInsensitive: true
bRegex: false
bSmart: true
sSearch: "03/23/2012"
__proto__: Object
[/code]
Refresh the page:
[code]
bCaseInsensitive: true
bRegex: false
bSmart: true
sSearch: ""
__proto__: Object
[/code]

So, then I moved the code up into fnStateLoaded, and changed it to pull from oData.aoSearchCols instead, and it's not even firing that chunk of code. Here's my entire table declaration:
[code]
var oTable = $('#lines').dataTable({
"aoColumnDefs": [ { "bSortable": false, "aTargets": [0] }
,{ "bVisible": false, "aTargets": [ 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33] }
,{ "fnRender": function (oObj) { if (oObj.aData[3][0] == 'H') { return '' + oObj.aData[3] + '' } else { return oObj.aData[3]; } }, "aTargets": [3] }
],
"aaSorting":[],
"bDeferRender": true,
"sDom": '<"H"lr>t<"F"ip>',
"aLengthMenu": [1, 10, 25, 50, 100],
"iDisplayLength": 10,
/* "bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "400px",*/
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/ajax/so_based_schedule",
"bJQueryUI": true,
"bAutoWidth": false,
"bStateSave": true,
"fnStateLoaded": function(oSettings, oData) {
var columns = $('#lines tfoot th');
columns.each(function(index){
search_string = oData.aoSearchCols[index].sSearch;
console.log(oData.aoSearchCols[index])
if (search_string !== ""){
$(this).find('select').val(search_string);
}
});
}
});
[/code]
I get no log to console, and I put a breakpoint on the var columns = line and it never hits it

and just for sanity check, the top of the jquery.dataTables.js resource
[code]
* @summary DataTables
* @description Paginate, search and sort HTML tables
* @version 1.9.0
* @file jquery.dataTables.js
* @author Allan Jardine (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact
[/code]

I've been trying to think if it could be something else, but like I said in my original post, two branches of the exact same code with the only difference being datatables 1.8 in one, 1.9 in the other, and the values persist through page refresh in 1.8 but not in 1.9.

allan

Are you able to give me a link to a test case, or set up an example using http://live.datatables.net ? I've just tested fnStateLoaded and it is firing for me here. It might be worth updating to the current 1.9.1 nightly from the downloads page to see if that addresses the issue (but I don't think there any fixes related to this, since as far as I can see it works as expected - except in this case where there is obviously something unexpected happening!).

Allan