jquery datatable server-side pagination not working

Question

I'm trying to implement the jquery datatables on a php project using the server-side processing, but the pagination is not working and I have no errors in the firebug console.

The page is simple and straight forward, here is the html code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/datatables.min.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/datatables.min.js"></script>

</head>

<body>
<table class="table">
  <thead>
  <tr>
    <th col-data="item_id">Item Id</th>
    <th col-data="name">Name</th>
  </tr>
  </thead>
</table>

<script type="text/javascript">

  $(document).ready(function() {
    var dataTable = $('.table').DataTable( {
      "processing": true,
      "serverSide": true,
      "buttons": [],
      "order": [],
      "ajax":{
        url :"{{ url('stock_acc_get') }}", // json datasource
        type: "post",
      }
    } );

  } );
</script>

</body>

</html>

Here is the data posted on server(viewed in firebug console):

columns[0][data]        0
columns[0][name]    
columns[0][orderable]       true
columns[0][search][regex]   false
columns[0][search][value]   
columns[0][searchable]      true
columns[1][data]        1
columns[1][name]    
columns[1][orderable]       true
columns[1][search][regex]   false
columns[1][search][value]   
columns[1][searchable]      true
draw    1
length  10
search[regex]   false
search[value]   
start   0

And here is the json response from the server:

{
  "draw":1,
  "recordsTotal":23,
  "recordsFiltered":10,
  "data": [
    ["100018","Test Acc"],["100019","Test Acc 2"],
    ["100020","Test Acc 3"],["5845645","Optional 1"],
    ["56456456","Optional 2"],["541515","Optional 3"],
    ["845812","Optional 4"],["103646","Belte Setesdal"],
    ["103647","Belte Setesdal"],["103681","Belte Sigdal-Eggedal"]
  ]
}

The page is set to display 10 records. The total number of records is 23 and it doesn't create the links to navigate to the next pages. I've attached a photo for better understand, the Next/Previous buttons are disabled and it shows me that is only one page.

Chris H. Chris H. · Accepted Answer · 2016-07-05T21:30:59

recordsFiltered is supposed to represent the number of records that pass the search box (along with any other) filters, not the number of records on the page.

You are telling DataTables that there are only 10 relevant records, so it doesn't attempt to set up the paging for the other 13.

See the third DataTables FAQ post (in the server-side processing category), or the Server-side processing page linked in that post for more information.

jquery datatable server-side pagination not working

3 Answers