Counts from ServerSide reponse not appearing

timcadieux

Hi folkz, I am pulling from serverside and the content is coming in but the UI displays

Showing 0 to 0 of 0 entries (filtered from NaN total entries)

If I look in my network tab i see

{draw: 1, recordsTotal: 2889, recordsFiltered: 8,…}
data: [{id: 1029, name: "Jon Doe", phoneNumber: "", email: "Unknown@unknown.ca",…},…]
draw: 1
error: null
partialView: null
recordsFiltered: 8
recordsTotal: 2889

My Table config

var table = $("#Table").DataTable({
    filter: true,
    // Design Assets
    stateSave: true,
    autoWidth: true,
    // ServerSide Setups
    processing: true,
    serverSide: true,
    // Paging Setups
    paging: true,
    // Searching Setups
    searching: { regex: true },
    // Ajax Filter
    ajax: {
        url: '@Url.Action("DataList", "People")',
        type: "Post",
        contentType: "application/json",
        dataType: "json",
        data: function (d) {
                return JSON.stringify(d);
        }
    },
    columns: [
        {
            data: "id",
            title : "Id"
        },
        {
            data: "name",
            title: "Name"
        }
    ]
});

What did I miss?

colin

At a glance it looks as expected. Are you able to link to your page so we can debug?

Colin

timcadieux

Unfortunately its behind a paywall. Can I use Xhr or anything like that? I also noticed my next, previous buttons don't work (obviously).

colin

Can you post the full data returned from the server - it's been truncated in your post above.

Colin

timcadieux

It looks like the below

{
   "draw":1,
   "recordsTotal":2899,
   "recordsFiltered":2899,
   "data":[
      {
         "id":3109,
         "name":null,
         "phoneNumber":null,
         "email":null,
         "photo":null,
         "twitterId":null,
         "twitterScreenName":null,
         "userTypeId":null,
         "userTypeName":null,
         "userTypeNameFr":null,
         "notes":null,
         "socialMedia":null
      }
   ],
   "error":null,
   "partialView":null
}

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Are all your responses with draw: 1?

It seems strange that there is one row but "recordsFiltered":2899 is the same as "recordsTotal":2899 which would mean that all records are filtered.

Kevin

timcadieux

I'm not entirely certain what to infer from your comment? I assume there's something incorrect with the draw : 1? I can see how the filtered numbers make no sense.

kthorngren

Take a look at the server side protocol docs. It explains how the draw parameter is used. Its like a sequence number. If your server script always returns draw: 1 then the sequence will be broken and that may be why the info is incorrect. Thats why I asked if the response is always draw: 1.

Kevin

timcadieux

Some from a breakpoint I can confirm that the Draw param changes to 2, or 3 etc based on the paging

kthorngren

Its hard to say what the problem might be without seeing it. Since you are unable to provide a test case maybe you can use the Debugger and give the upload code to the developers to take a look. I would capture a debug after the initial page load then capture another after changing the page. I believe the debugger trace will have the ajax response for the developers to look at.

Kevin

timcadieux

Sigh - so it turns out i'm a doofus

I have a global /js/DaTaTablesConfig.js

in which i grab the pagine data from the API endpoint i'm hitting.

$('#Table').on('preXhr.dt', function (e, settings, data) {
    data.from = data.start;
    data.take = data.length;
});

$('#Table').on('xhr.dt', function (e, settings, json, xhr) {
    var total = xhr.getResponseHeader('total');
    json.recordsTotal = total;
    json.recordsFiltered = total;
});

kthorngren

Looks like that might cause a problem Glad you found it.

Kevin