server side pagination is not working - via web service

server side pagination is not working - via web service

geekinpurpleandpinkgeekinpurpleandpink Posts: 10Questions: 0Answers: 0
edited June 2012 in General
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.

Replies

  • koosvdkolkkoosvdkolk Posts: 169Questions: 0Answers: 0
    [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?
  • geekinpurpleandpinkgeekinpurpleandpink Posts: 10Questions: 0Answers: 0
    edited June 2012
    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.
  • koosvdkolkkoosvdkolk Posts: 169Questions: 0Answers: 0
    edited June 2012
    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]
  • geekinpurpleandpinkgeekinpurpleandpink Posts: 10Questions: 0Answers: 0
    edited June 2012
    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;
    }
    });
  • allanallan Posts: 63,552Questions: 1Answers: 10,477 Site admin
    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
  • geekinpurpleandpinkgeekinpurpleandpink Posts: 10Questions: 0Answers: 0
    edited June 2012
    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. :)
  • geekinpurpleandpinkgeekinpurpleandpink Posts: 10Questions: 0Answers: 0
    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 :)
This discussion has been closed.