Server Side Pagination with jQuery Data Tables plu

Question

How can I achieve server side pagination using data table? Currently, on load of page I am initializing the data table & filling the table with Data (JSON) coming from database via Java Spring controller. I am making an Ajax call by passing search criteria in query string. Since we have hundreds of thousands of records, we have planned for server side pagination to improve performance.

For this the backend service developer has given me a service that gives me the per page records but takes inputs like PAGE NUMBER, NO OF PAGE RECORDS, SORT ORDER, SORT COLUMN.

I have to override data table implementation to pass these to service via Ajax request query string. I don't know if there is a way to achieve this.

Answer 1

How can I achieve server side pagination using data table?

For more info check out the documentation

$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

I would advise you to take a look at the docs again.

When making a request to the server using server-side processing, DataTables will send the following data in order to let the server know what data is required I would not copy all the parameters but only few of them here:

start, length, order[i][column]

those are the ones you are after I suppose.

KEEP IN MIND:

Once DataTables has made a request for data, with the above parameters sent to the server, it expects JSON data to be returned to it, with the following parameters set:

and you want to take a look at the properties yourself, in order not to make this post too long.

Answer 2

Ready to use code : just use as per requirement

    $("#myTable1").DataTable({
        "oLanguage": {
            "sSearch": "Search Address:"
        },
        "iDisplayLength": 50,
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        "ajax": {
            "url": url,
            "type": "POST",
            "datatype": "json"
        },
        "columns": [
                { "data": "ProviderName", "name": "ProviderName", "autoWidth": true },
                { "data": "ProviderName", "name": "ProviderName", "autoWidth": true },
                { "data": "cpTitle", "name": "cpTitle", "autoWidth": true },
                { "data": "cpAddress", "name": "cpAddress", "autoWidth": true },
                { "data": "cpPriceHourly", "name": "cpPriceHourly", "autoWidth": true },
                { "data": "cpCreatedDate", "name": "cpCreatedDate", "autoWidth": true },
                { "data": "cpId", "name": "cpId", "autoWidth": true }
        ],

        "columnDefs": [{
            "targets": 0,
            "data": null,
            "render": function (data, type, full, meta) {
                cnt++;
                if (cnt != 0) {
                    $("#divExcel").show();
                }
                   return meta.settings._iDisplayStart + meta.row + 1;
                }
           }]

    });