issue in DataTables Pagination custom Ajax call

Sanche

Hi,

I am using DataTables to show a list of my data from the server.
The format of the data I am getting from the server is "array of objects”.

I have this in my html code for the table:

and then I’m initializing the datatables with these parameters:

{
    “bAutoWidth”: false,
    “bProcessing”: true,
    “serverSide”: true,
    “bStateSave”: true,
    "aoColumns": [
                {
                    "sTitle": "Active",
                    "mData": "Active",
                    "bSearchable": false
                },
                {
                    "sTitle": "Title",
                    "mData": "Title"
                },
                {
                    "sTitle": "Action",
                    "mData": "ID",
                    "bSearchable": false,
                    "bSortable": false
                }
            ]
}

and then I’m feeding it with the data like this:

$listTable.dataTable().fnClearTable();
$listTable.dataTable().fnAddData(GetObjectsArrayFromServer());

This works perfectly while I’m bringing all the data to the client side using GetObjectsArrayFromServer().

Now I need to apply pagination, and I can not use the standard datatables ajax method, because the security settings of my environment require setting some headers (AccessToken, etc) to allow calling the web services.

I have implemented a Javascript function (loadPage(pageNumber, pageSize)) which returns data from server page by page using Ajax calls.

So far I have spent a couple of hours trying to figure out how I can fill each page of my table using my Ajax calls and then feed the fnAddData with the results coming each call but I haven't had any success so far.

Here is how I try to fill my table after each ajax call on a handler attached to “page” event:

var $listTable = $("#listTable");
$listTable.dataTable().on('page', function () {
    $listTable.dataTable().fnClearTable();
    $listTable.dataTable().fnAddData(loadPage(oSettings._iDisplayStart, oSettings._iDisplayLength));
});

With the above implementation, after every call I am always able to see one set of data and when I hit next or previous the same data set is shown since oSettings._iDisplayStart is always set to 0 and oSettings.fnRecordsDisplay() is equal to oSettings._iDisplayLength.

I appreciate if you could help me with this issue.