使用 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

Answer 1

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:

1. 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)
2. 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.

Answer 2

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.

Answer 3

Ther are some options that you must set true

eg

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

Answer 4

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