Datatables on server side processing with jQuery

Question

I am new to datatables. I am trying to find solution for server side processing since last two days but didnt find the solution.

My JS code is

this.$("#example").DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "../employees.json",
            "columns": [{
                "data": "Name"
            }, {
                "data": "Age"
            }, {
                "data": "Country"
            }, {
                "data": "Address"
            }, {
                "data": "Married"
            }]
        });

Datatable renders JSON in table format. But sorting, pagination and search operation is not working. It shows all results on the first page no matter how much value I have selected from dropdown

Also at bottom it shows message like "Showing 0 to 0 of 0 entries (filtered from NaN total entries)"

If I pass serverSide: false. everything works fine. But I want server side processing of the same

Any help would be appreciated

I want to do it using javascript. basically i am doing it with backbone.js — Kenny, Sep 03 '15 at 11:34
I answered a similar question recently: [stackoverflow.com/questions/32053336/jquery-datatables-does-not-recognize-data-loaded/32144889#32144889](http://stackoverflow.com/questions/32053336/jquery-datatables-does-not-recognize-data-loaded/32144889#32144889) — markpsmith, Sep 03 '15 at 12:08
@markpsmith thanks for providing solution but don't want to use .net I want solution in JS only. — Kenny, Sep 03 '15 at 13:06
'But I want server side processing' contradicts 'I want solution in JS only' — markpsmith, Sep 03 '15 at 13:25
@markpsmith I want to do it with handling ajax requests. In backbone.js or pure javascript/jquery — Kenny, Sep 03 '15 at 13:51
I encountered the same problem. When use serverside processing, you must set 'iTotalDisplayRecords' property to json response. Please google about 'iTotalDisplayRecords'. — toshi, Jan 17 '16 at 02:55

score 1 · Answer 1 · answered May 19 '16 at 19:03

When you set serverSide to true, you are telling DataTables that the server will handle all the sorting and paging instead of DataTables. DataTables will just display the data as-is from the server.

So if your server is ignoring all the sorting and paging parameters sent from DataTables, then the data will look funny. (In your case it seems that the server is listing all records, regardless of the requested page size).

You have two options:

Keep serverSide false. Let the server send DataTables all the data and let it handle the sorting, paging, ordering. Usually this is sufficient for a moderate number of records (50,000 records or less)
Modify server to properly handle sorting, paging, ordering as requested by DataTables. You will need to provide more information (such as total number of records for paging purposes) because DataTables can't deduce that information from 1 page worth of data. See https://datatables.net/manual/server-side#Sent-parameters to see what parameters DataTables sends to the server and https://datatables.net/manual/server-side#Returned-data for details on what the server should return.

score 1 · Answer 2 · edited Dec 10 '16 at 15:24

1

In the return of your json form must have these:

iTotalRecords : (Total rows),
iTotalDisplayRecords : (Total rows to display in your grud),
aaData : {(Your data)}.

Works for me.

edited Dec 10 '16 at 15:24

Donald Duck

6,488
18
59
79

answered Dec 10 '16 at 14:54

Cristhian Huangal

11
1

score 0 · Answer 3 · answered Sep 03 '15 at 11:16

Ther are some options that you must set true

e.g

this.$("#example").DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "../employees.json",
            "columns": [{
                "data": "Name"
            }, {
                "data": "Age"
            }, {
                "data": "Country"
            }, {
                "data": "Address"
            }, {
                "data": "Married"
            }],            
            'scrollCollapse': true,
            'ordering': true,
            'order': [[0, 'asc']],
            'searching': true,
            'paging': true,
        });

I think default values of these parameters are true only – Kenny Sep 03 '15 at 11:35 — Kenny, Sep 03 '15 at 11:35

score 0 · Answer 4 · answered Sep 01 '17 at 21:21

This may be late but you can use fnInfoCallback so for example:

"fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
                           if (isNaN(iTotal)) { 
                           return '';
                           }

                    return "Showing " + iStart +" to "+ iEnd + " of " + iTotal + " entries";
                      },

Datatables on server side processing with jQuery

4 Answers4