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

Question

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>

Answer 1

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.

Answer 2

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

Answer 3

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