fnFilter function

pshah

Hello,

In my use case, I want to display data table with initial data then update table data (by updating DOM) and redraw table by calling dataTable function. Use filter (for testing) to display all data. Looks like whenever I use filter it has reference to old data in oSettings.aoData property (when it ran second time). Here is the code snapshot for more details:

//using dataTables-1.7.6.js

[code]


$(document).ready(function(){
//draw first row
var html ="typeOnenameOnevalueSetOne";
displayData(html);
//redraw table with new row
html +="typeTwonameTwovalueSetTwo";
displayData(html);
});
function displayData(html){
var testTableDiv = $("#testTable tbody");
testTableDiv.html("");
//append contents
testTableDiv.append(html);
$("#testTable").dataTable({
"bRetrieve": true,
"bStateSave": true,
});
//get data table instance
var dataTableName = $("#testTable").dataTable();
//filter out table (for testing purpose; display all data)
dataTableName.fnFilter("", 0,false);
}






Column One
Column Two
Column Three






[/code]
After executing above script I am expecting to display two rows but it is displaying only one. If I remove filter criteria then it works as expected.

Not sure whether I am missing something how fnFilter function works or some know issue with the function.

Thanks in advance,

allan

> testTableDiv.html("");

You need to use fnClearTable if you want to clear the table, rather than emptying the HTML (since DataTables doesn't know you've done that).

Allan

pshah

Thank You! Allan for your reply. I read your suggestion and tried different changes in my test case and debug datatable code using firebug but I could not resolve the issue I have. I was under impression that when I called dataTable() function it will recognize updated DOM and draw table based on that but looks like if I call dataTable function multiple times it still holds old data reference. So issue is not related to fnFilter.

I updated displayData function to make it more simple (instead of clearing out contents)

[code]
function displayData(html){
var testTableDiv = $("#testTable tbody");
//set table contents
testTableDiv.html(html);
var testTable = $("#testTable").dataTable({
"bRetrieve": true,
"bStateSave": true,
});
//filter out table (for testing display all data)
testTable.fnFilter("", 0,false);
}
[/code]

When I checked property aoData of testTable (from above code) it holds old data.

Is there anyway I can pass 'some' property to datatable to inform that I updated table DOM and redraw table based on new data by keeping all end user setting (e.g. sorting)?

Thanks again for you reply,

allan

> I was under impression that when I called dataTable() function it will recognize updated DOM and draw table based on that

I'm afraid not. You would need to destroy the old table (fnDestroy) first, then put in your new HTML and finally initialise a new table.

> Is there anyway I can pass 'some' property to datatable to inform that I updated table DOM and redraw table based on new data

What you could do is call fnClearTable() to clear out all the current data and then make use of the fnAddTr API plug-in function ( http://datatables.net/plug-ins/api#fnAddTr ) to add the TR elements which you get back. So you would need to do something like:

[code]
testTable.fnClearTable();
$('>tr', html).each( function () {
testTable.fnAddTr( this, false );
} );
testTable.fnDraw();
[/code]
I've not tested that - but that's the basic idea (it should work!) :-). That could be wrapped up into it's own API plug-in function which might be quite nice.

Regards,
Allan

pshah

Thank You! Allan for your clarification and help to resolve the issue I was having.

If someone else is looking for updated code please see below




$.fn.dataTableExt.oApi.fnAddTr = function ( oSettings, nTr, bRedraw ) {
if ( typeof bRedraw == 'undefined' )
{
bRedraw = true;
}

var nTds = nTr.getElementsByTagName('td');
if ( nTds.length != oSettings.aoColumns.length )
{
alert( 'Warning: not adding new TR - columns and TD elements must match' );
return;
}

var aData = [];
for ( var i=0 ; itr',testTableDiv).each(function(){
testTable.fnAddTr(this, false );
});
testTable.fnDraw();
testTable = $("#testTable").dataTable();
//filter out table (for testing display all data)
testTable.fnFilter("", 0,false);
}