DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Counts from ServerSide reponse not appearing

Counts from ServerSide reponse not appearing

timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0
in DataTables 1.10

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?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Colin

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0
    edited April 2021

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Colin

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0
    edited April 2021

    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

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

    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

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954
    edited May 2021

    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

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

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

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

    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

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0
    edited May 2021

    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;
});
  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954
    Answer ✓

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

    Kevin

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.