CODEWITHSUNDEEP
phpjqueryajaxjsondatatables
iLaYa ツ
iLaYa ツ

Reputation: 3997

How to display my JSON data into table using DataTable plug-in?

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", "[email protected]"],
        ["2", "john", "[email protected]"],
        ["3", "raj", "[email protected]"],
        ["4", "selvin", "[email protected]"],
        ["5", "ismail", "[email protected]"],
        ["6", "muadth", "[email protected]"],
        ["7", "ahmed", "[email protected]"],
       .....
    ]
}

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>

Upvotes: 0

Views: 7733

Answers (3)

bpeterson76
bpeterson76

Reputation: 12870

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.

Upvotes: 3

Smiter
Smiter

Reputation: 1391

It seems like you should send back a correct "sEcho" variable in JSON.

It is information that DataTables needs to know about the data being sent back, in order to be able to render. You need to pass back to DataTables the value that was sent.

sEcho is described here: http://datatables.net/usage/server-side

So to get your example works change "sEcho" to 1 or better write like this:

"sEcho": int(request.vars['sEcho'])   #python code

Upvotes: 0

Jesperhag
Jesperhag

Reputation: 313

You could just loop though the 'aaData' and add a new row directly with fnAddData.

Check here for example: http://datatables.net/examples/api/add_row.html

Edit: A example for you as well.

var aaData = theVariableHoldingTheJsonObject.aaData;
$("#datatable_paging").dataTable().fnAddData ( aaData )

That's basically it

Upvotes: 0

Related Questions