How to add page length in datatables when using ajax implementation

I’m trying to add pageLength to my datatables with ajax implementation but when I try to see the results, it returns a lot on the table instead of slicing the data for each page. Please see my code below.

JS

$('table.dataTableAjax').DataTable({
  "processing": true,
  "serverSide": true,
  "paging": true,
  "pageLength": 50,
  "ajax": "..."
});

I also tried the code below but still not working fine.

"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]

Example Data From Server Side

{
    "data":[
        { "name": "Bob" },
        { "name": "Billy" }
    ]
}

In my server side, I’m throwing about 500+ data rows.

So the current result is it returns all the 500+ table rows instead of 50 table rows each page.

Answer

It might be that you configured the serverSide property as “true” in the datatable configuration. If you enable it, the server should be responsible for limiting the number of rows that need to be sent. You can try disabling the serverSide option and see.

$('table.dataTableAjax').DataTable({
  "processing": true,
  "serverSide": false,
  "paging": true,
  "pageLength": 50,
  "ajax": "..."
});