title: DataTable with Server-side processing
body: <p>My current problem is how could I properly perform pagination in DataTable to generate lengthMenu <code>(Showing 1 to 10 of 57 entries)</code> dynamically and only load data when next page is clicked.
  <br>So far my understanding on server-side processing is like this:<br><strong>My web service is returning data from database using MySQL with limit and offset in JSON format</strong>. <br>Assuming that the JSON data is correct how could I properly paginate my DataTable? </p>
  
  <p>Below is my code:
  <br></p>
  
  <pre><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 + "&lt;hr&gt;" + row.data1;
              },
              "targets": 0
          },
          {
              "render": function ( data, type, row ) {
                  return data + "&lt;br&gt;" + row.data2 ;
              },
              "targets": 1
          },
          {
              "render": function ( data, type, row ) {
                  return  data ;
              },
              "targets": 2
          },
          {
              "render": function ( data, type, row ) {
  
                  if (row.status == '2'){
  
                  return '&lt;button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '"&gt;Verify&lt;/button&gt;'
                  + ' &lt;button class="fas fa-undo btn-danger" data-toggle="tooltip" title="Resend" value="' + data + '"&gt; Authenticate&lt;/button&gt;';
  
                  }
                  else{
                      return '&lt;button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '"&gt;Authenticate&lt;/button&gt;';
                  }
  
              },
              "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');
  </code></pre>
  
  <p><br>My web service would always return 10 row of data (or am I doing wrong here?)
  <br> My reference:<a href="https://datatables.net/examples/data_sources/server_side" rel="nofollow noreferrer">https://datatables.net/examples/data_sources/server_side</a></p>