Counts from ServerSide reponse not appearing

Counts from ServerSide reponse not appearing

timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

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,112Questions: 1Answers: 2,583

    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,112Questions: 1Answers: 2,583

    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: 20,141Questions: 26Answers: 4,736

    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: 20,141Questions: 26Answers: 4,736
    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: 20,141Questions: 26Answers: 4,736

    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: 20,141Questions: 26Answers: 4,736
    Answer ✓

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

    Kevin

This discussion has been closed.