State Saving with individual column filtering (using select menus)

shredluc

Hey All,

First it doesn't seem to work. Probably because i'm doing something wrong. I have columns that create custom select filters that are data dependent. I also want state saving. So the work flow looks like this: "custom filter and custom sort, switch to another page, come back and have the previous filtering and sorting applied". If no data exists for the filter it should do the expected thing and show an empty table ("No matching records found"). The column sort works great, of course the filtering not so much. What would be the correct way to use the state saving feature of DataTables with such custom filters?
I am including some code to help clarify how i generate the table and select filters.
Thanks for the help!
Table generation:
[code]
$.ajax({
url:'pinrisk?refresh',
cache: false,
success: function(json){
if (oTable == null || typeof oTable == "undefined"){
oTable = $('#outtable').dataTable({
"bPaginate": false,
"bInfo": false,
"bRetrieve": true,
"bAutoWidth": false,
"bStateSave": true,
"iCookieDuration": 86400,
"sDom":'<"generalsearch"f>',
"aaSorting": [[7,'asc'],[0,'asc'],[4,'asc']],
'aoColumnDefs':[
{"bSortable":false, "aTargets":[2,3,5,6]},
{"aTargets":[7], "sType":'pin-group'}, ///used for custom sort on pingroup column
{"aTargets":[8], "sType":'percent'} ///used for custom sort on percent column
],
"fnRowCallback": function(nRow, aData, iDisplayIndex){
var cell = $(nRow).children().eq(7);
if(aData[7] > 0.0){
(cell.addClass('blue'));
}else if(aData[7] < 0.0){
(cell.addClass('red'));
}else if(aData[7] == 0.0){
(cell.addClass('green'));
}
return nRow;
}

});
$('#outtable thead').append($('#outtable thead tr:eq(0)')[0]); //swap the headers
}
var data = eval('(' + json + ')');
oTable.fnClearTable();
oTable.fnAddData(data.aaData);
oTable.fnDraw();
$(datefilter).empty().append(createDateSelect(oTable.fnGetColumnData(1,true,false)));
}
});
[/code]
Select generation: (hasoldfilter is used for preserving filtering across an ajax refresh, i need full page refresh)
[code]
var createDateSelect = function(aData, oldval){
var r='All', i, iLen=aData.length;
var hasoldfilter = false;
for ( i=0 ; i

shredluc

Looking at the DataTables source, i think i can accomplish what i want to do by keeping everything the same and after the new selects are generated, look at "oSettings.oLoadedState.aaSearchCols" to get the saved state filter and apply it myself to the proper columns. I'm trying to find the exact code location where the column search (aoSearchColumns) ends up being cleared. I have a feeling it's got something to do with the fnClearTable or the fnAddData;

shredluc

So i just realized that i use a custom range filter like here: http://datatables.net/examples/plug-ins/range_filtering.html

Now i really don't know if there is an easy way to get the previous filter state on a page change without taking apart the DataTables code. Any suggestions?

edallen

I solved our problem with restoring the state of input fields in the column heads like this:
// after defining oTable
oTable = $('#pmo_projects_list').dataTable({
"sDom": 'RC<"clear">lfrtip',
"oLanguage": {
"sSearch": "Search all columns:"
},
"bStateSave": true,
"aaSorting": [
[1,'asc']
],
"aoData": [
{"sType": 'numeric'},
null,
null,
null,
{ "sType": 'html'},
{ "sType": 'html', "bSortable": false },
{ "sType": 'html', "bSortable": false },
{ "sType": 'html', "bSortable": false }
]
});

// Set any search input fields after initialization.

// Not all columns have input fields so to keep indices in sync,
// iterate over a column proxy, the row of cells that
// have inputs if they are present, not the input fields themselves.
var oSettings = oTable.fnSettings();

var columns = $('#pmo_projects_list thead td');

columns.each(function(index){
search_string = oSettings.aoPreSearchCols[index].sSearch;
if ( search_string !== ""){
$(this).find('input').val(search_string);
}
});

I'll have to get a little fancier to do the tables that have a mix of input fields and select boxes for filtering at column heads.