Paging issue when using sAjaxSource, fnServerData

jsherian

Hello,

I have a dataTable configured via the following:

oFeedTable = $('#feedGrid').dataTable({
"bLengthChange": false,
"iDisplayLength": 10,
"aaSorting": [[0, 'asc'], [1, 'asc']],
"sPaginationType": "four_button",
"aoColumns": [
//Column listing
],
"sAjaxSource": "foo.aspx/getFeeds",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
url: sSource,
success:
function (result) {
var json = $.parseJSON(result);
fnCallback(json);
},
error:
function () {
//Error handling
}
});
}
});

And the pagination plugins are also included, i.e.:

$.fn.dataTableExt.oPagination.four_button = {
"fnInit": function (oSettings, nPaging, fnCallbackDraw) {
if (oSettings.fnRecordsTotal() <= pageSize) {
return;
}
...

I am having problems because the "fnInit" pagination function is called prior to the table data being populated via the function specified in the "fnServerData" table setting. As a result, when "fnInit" is called oSettings.fnRecordsTotal() has a value of zero which prevents the paging HTML elements from being created.

I am not sure how to refactor this code to make it work correctly. Any help would be greatly appreciated.