Paging issue when using sAjaxSource, fnServerData
Paging issue when using sAjaxSource, fnServerData
![jsherian](https://secure.gravatar.com/avatar/f55e202819d6da4c5b5c4db023905731/?default=https%3A%2F%2Fvanillicon.com%2Ff55e202819d6da4c5b5c4db023905731_200.png&rating=g&size=120)
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.