具有服务器端处理的DataTable

Question

My current problem is how could I properly perform pagination in DataTable to generate lengthMenu (Showing 1 to 10 of 57 entries) dynamically and only load data when next page is clicked.
So far my understanding on server-side processing is like this:
My web service is returning data from database using MySQL with limit and offset in JSON format .
Assuming that the JSON data is correct how could I properly paginate my DataTable?

Below is my code:

var Table1 = $('#table').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": SomeWorkingURLS,
        "dataType": "jsonp"
    },

    "columns": [
        { "data": "Column1" },
        { "data": "Column2" },
        { "data": "Column3" },
        { "data": "Column4" }
    ],
    "columnDefs": [
        {
            "render": function ( data, type, row ) {
                return data + "<hr>" + row.data1;
            },
            "targets": 0
        },
        {
            "render": function ( data, type, row ) {
                return data + "<br>" + row.data2 ;
            },
            "targets": 1
        },
        {
            "render": function ( data, type, row ) {
                return  data ;
            },
            "targets": 2
        },
        {
            "render": function ( data, type, row ) {

                if (row.status == '2'){

                return '<button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '">Verify</button>'
                + ' <button class="fas fa-undo btn-danger" data-toggle="tooltip" title="Resend" value="' + data + '"> Authenticate</button>';

                }
                else{
                    return '<button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '">Authenticate</button>';
                }

            },
            "targets": 3
        },
        { "width": "14%", "targets": 0 },
        { "width": "60%", "targets": 1 },
        { "width": "10%", "targets": 2 },
        { "width": "16%", "targets": 3 , "class":"dt-center"},
    ],

    "destroy": true,
    "searching" :false

    });

    Table1.draw();
    $("select[name*='table_outbound_shipment_list']").removeClass('form-control');
    $("#table_outbound_shipment_list_length").remove();
    $('.form-control.form-control-sm').removeClass('form-control');

My web service would always return 10 row of data (or am I doing wrong here?)
My reference: https://datatables.net/examples/data_sources/server_side

Answer 1

There are libraries and helper classes for server-side processing that help with preparing server-side response.

For example, DataTables distribution includes ssp.class.php helper calss and sample script to aid in generating response if you're using PHP.

Otherwise, you can inspect sent parameters and paginate your results based on start and length request parameters.