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

akgem

I was hoping someone could help me figure out why my grid keeps showing "Showing 0 to 0 of 0 entries (filtered from NaN total entries)". I spent a few hours trying to figure it out, searching this forum and other sources out there, and it just won't work. I do have "draw" parameter from request sent back to the grid with every call; I set both "recordsTotal" and "recordsFiltered" parameters to the actual counts, my data is displayed correctly, I can page and filter my data, but the footer keeps saying "Showing 0 to 0 of 0 entries (filtered from NaN total entries)" no matter what I do.

HTML:

Last Name	First Name	Start Date	End Date	Total Hours	Status

Javascript:
$("#timesheetGrid").DataTable({
processing: true,
serverSide: true,
ajax: {
type: "POST",
url: "/svc/GetTimesheetList",
dataSrc: "Payload.data",
data: function (request) {
console.log(request);
},
complete: function (response) {
console.log(response);
}
},
columns: [
{ data: "LastName" },
{ data: "FirstName" },
{ data: "StartDate", searchable: false },
{ data: "EndDate", searchable: false, orderable: false },
{ data: "TimesheetTotalHours", searchable: false, orderable: false },
{ data: "TimesheetStatus", searchable: false, orderable: true },
{ data: null, searchable: false, orderable: false }
],
columnDefs: [
{
targets: "dgcActions",
render: function (data, type, row) {
var html = "<a class=\"btn btn-primary\" href=\"../Timesheet/" + row.TimesheetId + "\">View</a> ";

                return html;
            }
        }
    ]
});

Request:
{"draw":1,"columns":[{"data":"LastName","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"FirstName","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"StartDate","name":"","searchable":false,"orderable":true,"search":{"value":"","regex":false}},{"data":"EndDate","name":"","searchable":false,"orderable":false,"search":{"value":"","regex":false}},{"data":"TimesheetTotalHours","name":"","searchable":false,"orderable":false,"search":{"value":"","regex":false}},{"data":"TimesheetStatus","name":"","searchable":false,"orderable":true,"search":{"value":"","regex":false}},{"data":null,"name":"","searchable":false,"orderable":false,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false}}

Response:
{"readyState":4,"responseText":"{\"Payload\":{\"draw\":1,\"recordsTotal\":5542,\"recordsFiltered\":5542,\"data\":[{actual data removed for privacy}]},"IsError":false,"ErrorMessage":""},"status":200,"statusText":"OK"}

I removed the actual data from response for privacy reasons. My "dataSrc" is binding to the "Payload.data" element of the response, and it renders data just fine, filtering works fine, and paging works for the most part. The only problem with the pager is that the "Next" button is always disabled (but the "Previous" button works fine, and only gets disabled on the first page like it's supposed to). I suspect the "Next" button issue and the "Showing 0 to 0 of 0 entries (filtered from NaN total entries)" are somehow related.

Any help would be appreciated.

akgem

Sorry about the formatting above, for some reason it's not letting me edit my post, so here's another attempt...

HTML:

<table id="timesheetGrid" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Last Name</th>
                <th>First Name</th>
                <th class="dgcShortDate">Start Date</th>
                <th class="dgcShortDate">End Date</th>
                <th>Total Hours</th>
                <th>Status</th>
                <th class="dgcActions"></th>
            </tr>
        </thead>
    </table>

Javescript:

 $("#timesheetGrid").DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            type: "POST",
            url: "/svc/GetTimesheetList",
            dataSrc: "Payload.data",
            data: function (request) {
                console.log(JSON.stringify(request));
            },
            complete: function (response) {
                console.log(JSON.stringify(response));
            }
        },
        columns: [
            { data: "LastName" },
            { data: "FirstName" },
            { data: "StartDate", searchable: false },
            { data: "EndDate", searchable: false, orderable: false },
            { data: "TimesheetTotalHours", searchable: false, orderable: false },
            { data: "TimesheetStatus", searchable: false, orderable: true },
            { data: null, searchable: false, orderable: false }
        ],
        columnDefs: [
            {
                targets: "dgcActions",
                //data: null,
                render: function (data, type, row) {
                    var html = "<a class=\"btn btn-primary\" href=\"../Timesheet/" + row.TimesheetId + "\">View</a> ";

                    return html;
                }
            },
            {
                targets: "dgcShortDate",
                render: function (data, type, row) {
                    return moment(data).format("MM/DD/YYYY");
                }
            }
        ]
    });

Request:

{"draw":1,"columns":[{"data":"LastName","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"FirstName","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"StartDate","name":"","searchable":false,"orderable":true,"search":{"value":"","regex":false}},{"data":"EndDate","name":"","searchable":false,"orderable":false,"search":{"value":"","regex":false}},{"data":"TimesheetTotalHours","name":"","searchable":false,"orderable":false,"search":{"value":"","regex":false}},{"data":"TimesheetStatus","name":"","searchable":false,"orderable":true,"search":{"value":"","regex":false}},{"data":null,"name":"","searchable":false,"orderable":false,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false}}

Response:

{"readyState":4,"responseText":"{\"Payload\":{\"draw\":1,\"recordsTotal\":5542,\"recordsFiltered\":5542,\"data\":[{actual data removed for privacy}]},"IsError":false,"ErrorMessage":""},"status":200,"statusText":"OK"}

StijnQCA

Just guessing here but maybe because the Response is Stringified?

allan

Yes. That looks really odd - the readyState and responseText is what you would expect the Javascript representation of the XHR to be - not actually in the Ajax request itself! Certainly if it is, that will cause DataTables issues.

Also, I'm afraid that ajax.dataSrc currently does not work with server-side processing.

Allan

akgem

We use a generic response container that all our ajax service methods return, where the .Payload property is what has the actual data, and the DataTables grid definitely doesn't like that. If I change the return type of my method to return the data in Payload, everything works fine, but as soon as I move my response back inside Payload property and explicitly tell the grid to use that (by overriding ajax.dataSrc), it can load the data fine, but the footer and the pager are still messed up. Looks like there may be a bug in there causing problems with custom data sources...

I was expecting something like this to fix it, but it still didn't work.

            dataSrc: function (json) {
                console.log(json);
                //return json.Payload;
                return json.Payload.data;
            },

allan

Yes, as I say, ajax.dataSrc doesn't work with server-side processing I'm afraid. You can use the dataFilter of the jQuery Ajax object to effectively do the same thing though.

Allan