datatables pagination broken after changing to server-side processing

cmatta

I asked this over at stack overflow earlier, but I figured I'd ask here as well:
http://stackoverflow.com/questions/9609100/jquery-datatables-pagination-broken-after-changing-to-server-side-processing

had a page that was initializing an empty dataTable, and getting the json data with $.getJSON() after a jquery change from a select.It was then adding to the table with .fnAddData.Like this:

[code]
oTableDisk = $('#disk_connection_table').dataTable({
"bJQueryUI": true,
"iDisplayLength": 30,
"oLanguage": {
"sLengthMenu": tableLength
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
$(nRow).attr('id', aData[0] + "|<?php echo $this->hostInfo['name']; ?>|<?php echo $this->hostInfo['id']; ?>");
return nRow;
},
"aoColumns": [{"bSearchable": false, "bVisible": false}, null, null, null, null, null, null]
});

$('#disk_switch').change(function(){
$.getJSON('/host/getavailableports?type=disk&switch=' + $('#disk_switch option:selected').val(), function(data){
if(data[0]){
data.reverse();
oTableDisk.fnClearTable();
$.each(data, function(index){
//console.log(data[index]);
oTableDisk.fnAddData([data[index]['Item1'],
data[index]['Item2'],
data[index]['Item3'],
data[index]['Item4'],
data[index]['Item5'],
data[index]['Item6'],
data[index]['Item8']]);

});
enableEditable(oTableDisk);
}
});
});
[/code]

This was working fine until we needed to process more than 500 rows of information and was breaking IE with "script has become unresponsive" errors.

Now, I'm not initializing an empty dataTable at all, but creating one when a select menu changes like this:

[code]
$('#disk_switch').change(function(){
oTableDisk = $('#disk_connection_table').dataTable({
"bJQueryUI": true,
"iDisplayLength": 30,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": '/host/getavailableports?type=disk&switch=' + $('#disk_switch option:selected').val(),
"aaSorting": [[0, "asc"]],
"oLanguage": {
"sLengthMenu": tableLength
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
$(nRow).attr('id', aData[0] + "|<?php echo $this->hostInfo['name']; ?>|<?php echo $this->hostInfo['id']; ?>");
return nRow;
},
"aoColumns": [{"bSearchable": false, "bVisible": false}, null, null, null, null, null, null],

"fnDrawCallback": function() {
$( oTableDisk.fnGetNodes() ).click( function () {
enableEditable(oTableDisk);
} );
}

});
[/code]

After rewriting the controller and model to support queries with limit, where and orderby arguments I'm getting data back and it seems like my JSON object is correctly formatted. The problem is that now I don't have pagination functionality. or sorting functionality. The table shows the pagination arrows as sort of greyed out, and clicking the column headers doesn't really do anything. Above the pagination links it says "Showing 1 to 30 of 30 entries (filtered from 483 total entries)" which is correct for the query.

I think this has to do with asking the table to be loaded after the DOM has been loaded but I don't know how to fix it.... Any help would be appreciated, this product is fantastic BTW, thanks.

allan

> oTableDisk.fnAddData( ... )

You are drawing the table every time you call that. So if you are adding 500 rows, then you add redrawing the table (i.e. refiltering and sorting) 500 times! You would really want to pass in the second parameter to fnAddData as false to stop that draw and then call fnDraw after the loop - or better yet just pass in your data array since fnAddData will accept 2D arrays.

If you still want to use server-side processing, can you run your table through the debugger and I'll take a look at the output.

Thanks,
Allan

cmatta

Allan, thank you for the quick reply! This is exactly what I was looking for, a quick, simple fix. I didn't write this code, but have inherited it. This seems to be working flawlessly now.

Thanks again!