server side pagination is not working - via web service

geekinpurpleandpink

Hi,

I am currently trying to manipulate the data table by implementing the server side approach - paging, sorting, filtering is done via server side.
my problem is that when i click the to the next page the table is not updating. But i can see in firebug that the post to the web service was called and the "processing" text is just displaying no other event is happening.

here is the js:
var oTable = $("table.display").dataTable({
"iDisplayLength": 25,
"bProcessing": true,
"bJQueryUI": true,
"bAutoWidth": false,
"bServerSide": true,
"sAjaxSource": thisSite + "/_vti_bin/ListViewWebService.svc/GetListItemsPOST",
"sPaginationType": "full_numbers",
"aaSorting": [[1, "asc"]],
"fnServerData": function (sSource, aoData, fnCallback) {
var dataParam = '{' + '"iDisplayStart"' + ':' + '"' + iDisplayStartVal + '"' + ',' + '"iDisplayLength"' + ':' + '"' + iDisplayLengthVal + '"' + ',' + '"sSearch"' + ':' + '"' + sSearchVal + '"' + ',' + '"bEscapeRegex"' + ':' + '"' + bEscapeRegexVal + '"' + ',' + '"iSortingCols"' + ':' + '"' + iSortingColsVal + '"' + ',' + '"iSortCol_0"' + ':' + '"' + iSortCol_0Val + '"' + ',' + '"sSortDir_0"' + ':' + '"' + sSortDir_0Val + '"' + ',' + '"sEcho"' + ':' + '"' + sEchoVal + '"' + ',' + '"listName"' + ':' + '"' + wcfListName + '"' + ',' + '"columnNames"' + ':' + '"' + wcfColumnsToDisplay + '"' + '}';
aoData = dataParam;
$.ajax({
"type": "POST",
"url": sSource,
"data": aoData,
"dataType": 'json',
"contentType": "application/json",
"success": function (msg) {
var json = $.parseJSON(msg);
fnCallback(json);
iDisplayStartVal += 25;
},
"error": function (msg) {
alert("AJAX Error: " + msg);
}
});
}
});

thank you very much for your help in advance.

koosvdkolk

[quote]But i can see in firebug that the post to the web service was called[/quote]

What does Firebug tell you about the response of the server?

geekinpurpleandpink

based on the values that i can see in the firebug, a newly set of data was returned based on the new parameters that was sent during the call back. also there is no error message displayed.

thanks.

koosvdkolk

Ok. It is quite difficult to see what goes wrong. The only thing I can think of is that in the original server side processing examples, it says:

[code]
"success": fnCallback
[/code]

whereas in your example, you call your own function, which then calls fnCallback

[code]
function(msg) {
var json = $.parseJSON(msg);
fnCallback(json);
....
}
[/code]

If you do it like this, fnCallback gets different parameters than in the original examples, as jQuery itself will give 3 parameters

[code]
function success(data, textStatus, jqXHR)
[/code]
http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings

so yo might want to change your code into

[code]
function(data, textStatus, jqXHR) {
fnCallback(data, textStatus, jqXHR);
....
}
[/code]

geekinpurpleandpink

hi thank you for your reply. i will try it.

also, here is my complete data table initialization.


var oTable = $("table.display").dataTable({
"iDisplayLength": 25,
"bRetrieve": true,
"bDestroy": true,
"bProcessing": true,
"bJQueryUI": true,
"bAutoWidth": false,
"bServerSide": true,
"sAjaxSource": thisSite + "/_vti_bin/ListViewWebService.svc/GetListItemsPOST",
"sPaginationType": "customPaging",
"aaSorting": [[1, "asc"]],
"fnServerData": function (sSource, aoData, fnCallback) {
dataParam = '{' + '"iDisplayStart"' + ':' + '"' + iDisplayStartVal + '"' + ',' + '"iDisplayLength"' + ':' + '"' + iDisplayLengthVal + '"' + ',' + '"sSearch"' + ':' + '"' + sSearchVal + '"' + ',' + '"bEscapeRegex"' + ':' + '"' + bEscapeRegexVal + '"' + ',' + '"iSortingCols"' + ':' + '"' + iSortingColsVal + '"' + ',' + '"iSortCol_0"' + ':' + '"' + iSortCol_0Val + '"' + ',' + '"sSortDir_0"' + ':' + '"' + sSortDir_0Val + '"' + ',' + '"sEcho"' + ':' + '"' + sEchoVal + '"' + ',' + '"listName"' + ':' + '"' + wcfListName + '"' + ',' + '"columnNames"' + ':' + '"' + wcfColumnsToDisplay + '"' + '}';
aoData = dataParam;
$.ajax({
"type": "POST",
"url": sSource,
"data": aoData,
"dataType": 'json',
"contentType": "application/json",
"success": function (msg) {
var json = $.parseJSON(msg);
fnCallback(json);
iDisplayStartVal += 25;
},
"error": function (msg) {
alert("AJAX Error: " + msg);
}
});
},
"aoColumnDefs": [
{
"fnRender": function (oObj) {
var editLink = "";
if (userPermissionInitial == "v") {
editLink = "";
}
else {
var colFirst = oObj.aData[0];
var colID = oObj.aData[indexID];
editLink = '' + colFirst + '';
}
return editLink;
},
"aTargets": [0]
},
{
"fnRender": function (oObj) {
var controllerNewContent = "";
// For those with Controller column only
if (indexController != -1) {
var colCon = oObj.aData[indexController];
var colConWords = colCon.split(" ");
colCon = colCon.replace(/&/g, '');
if (colConWords.length == 1) {
colCon = colCon + " || ";
}
else {
colCon = colCon.replace(/ /g, '');
var semiColon = colCon.indexOf(";");
if (semiColon == -1) {
colCon = colCon + " || ";
}
else {
colCon = colCon.replace(/;/g, ' || ');
}
}
if (listName == "Procedure") {
var colManTrans = oObj.aData[indexController_MANTransferee];
colManTrans = colManTrans.replace(/&/g, '');
colManTrans = colManTrans.replace(/ /g, '');
var colManProc = oObj.aData[indexController_MANProcessor];
colManProc = colManProc.replace(/&/g, '');
colManProc = colManProc.replace(/ /g, '');
controllerNewContent = colCon + colManTrans + " || " + colManProc + " || ";
}
else {
controllerNewContent = colCon;
}
} else {
}
return controllerNewContent;
},
"aTargets": [indexControllerFilter]
},
{ "bSortable": false, "aTargets": [0] }
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var cellContent;
var colID = aData[indexID];
$('td', nRow).each(function (i) {
//if (i != 0) {
cellContent = aData[i];
this.innerHTML = '' + cellContent + '';
//}
});
/* Gray font for Is Assistant */
if (listName == "Coordinator") {
if (aData[indexIsAssistant] == "Yes") {
$('td', nRow).addClass('coordinatorAssistant');
}
}
return nRow;
}
});

allan

My guess is that you are always returning sEcho as 1 rather than giving DataTables back what it sends (cast as an integer for security). If it isn't that thought, then you'll need to give us a link for us to be able to off any help.

Allan

geekinpurpleandpink

hi allan,

yes the sEcho is always returning 1.
ok I will check it.

i'm sorry i dont have a link for this because i'm developing in a local vm.

thanks for your reply. :)

geekinpurpleandpink

thank you for all your suggestions. :)

I was able to fix it.

it turns out i was overriding a parameter that is defined by the plugin.

i just cleaned up my jquery code to this:

[code]
var oTable = $("#dataTableCustom").dataTable({
"iDisplayLength": 25,
"bDestroy": true,
"bProcessing": true,
"bJQueryUI": true,
"bAutoWidth": false,
"bServerSide": true,
"sAjaxSource": globalSource,
"sPaginationType": "full_numbers",
"fnServerData": function (sSource, aoData, fnCallback) {
$.getJSON(sSource, aoData, function (json) {
var parsedJSON = $.parseJSON(json);
fnCallback(parsedJSON)
});
}
});

[/code]

now my data table data is refreshing. :)

i'm so happy. :) thank you very much for sharing your thoughts :)