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 — Kiran Shinde
– Kiran Shinde, Commented Sep 3, 2015 at 11:34
I answered a similar question recently: stackoverflow.com/questions/32053336/jquery-datatables-does-not-recognize-data-loaded/32144889#32144889 — markpsmith
– markpsmith, Commented Sep 3, 2015 at 12:08
@markpsmith thanks for providing solution but don't want to use .net I want solution in JS only. — Kiran Shinde
– Kiran Shinde, Commented Sep 3, 2015 at 13:06

Jin Kim · Accepted Answer · 2016-05-19 19:03:43Z

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.

Donald Duck is with Ukraine · Accepted Answer · 2016-12-10 15:24:37Z

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, 2016 at 15:24

Donald Duck is with Ukraine

8,99323 gold badges80 silver badges105 bronze badges

answered Dec 10, 2016 at 14:54

Cristhian Huangal

111 bronze badge

Comments

Alperen Talaslıoğlu · Accepted Answer · 2015-09-03 11:16:27Z

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,
        });

kratos · Accepted Answer · 2017-09-01 21:21:25Z

-1

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";
                      },

answered Sep 1, 2017 at 21:21

kratos

2,4952 gold badges30 silver badges49 bronze badges

Collectives™ on Stack Overflow

Datatables on server side processing with jQuery

4 Answers 4

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Linked

Related