Home/ Questions/Q 8962115
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:03:42+00:00

As per the document here ,i have implemented the server side code. JS code

  • 0

As per the document here ,i have implemented the server side code.

JS code

$('#datatable_paging').dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "#### my php file path ####",
 });

I am getting JSON data as 

{
    "sEcho": 0,
    "iTotalRecords": 19,
    "iTotalDisplayRecords": "19",
    "aaData": [
        ["1", "peter", "peter@gmail.com"],
        ["2", "john", "john@yahoo.com"],
        ["3", "raj", "raj@in.com"],
        ["4", "selvin", "selvin@gmail.com"],
        ["5", "ismail", "ismail@gmail.com"],
        ["6", "muadth", "muad@hotmail.com"],
        ["7", "ahmed", "ahmed@gmail.com"],
       .....
    ]
}

Now i need to display this JSON result in below table with Datatable pagination

HTML code

    <table id="datatable_paging">
        <thead>
          <tr>
            <th>Id </th>
            <th>Name</th>
            <th>E-mail</th>                
          </tr>
        </thead>            
  </table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    People answering this are overthinking this way too much. Datatables will handle the output without any fancy looping/assigning/etc when you set the options correctly. Assuming your JSON return is proper as described in the spec:

    HTML:

     <table id="datatable_paging"></table>

    Then the jQuery:

    var oTable = $('#datatable_paging').dataTable( {        
        "bDestroy":true,
        "bStateSave": true,
        "aaSorting": [[1, "asc"]], 
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "#### my php file path ####",
        "bJQueryUI": true,
        "bAutoWidth": false,
        "bFilter":true,
        "bLengthChange": true,
        "bPaginate": true,
        "bSort": true,
        "iDisplayLength": 10,
        "bInfo": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            { "sTitle": "Id", "sWidth": "33%"},
            { "sTitle": "Name", "sWidth": "33%"},
            { "sTitle": "Email", "sWidth": "33%"}
        ]
    })

    The paging, etc is going to be setup properly, assuming that your PHP source is correctly filtering as it should. If, for example, you find that you’re getting 19 results when you should be getting 10, you’d know that the problem is at your source, not here in the jQuery. In your example, the source says it’s returning 19 total result out of 19 and bPaginate hasn’t been specified, so that would be why the paging isn’t working. aoColumns setups your head, no need to do in HTML unless you really want to. The other functions are well-documented on the datatables site, though ask questions if you’re confused.

    • 0