Geek Answers Handbook

How to load dynamic json in jquery datatable

I want to load dynamic data into my jQuery datatable. This means that before I get json data from the server, I don't know what fields it contains, but I'm sure json is valid. It will look lower

"data": [ { "first_name": "Airi", "last_name": "Satou", "position": "Accountant", "office": "Tokyo", "start_date": "28th Nov 08", "salary": "$162,700" }, { "first_name": "Angelica", "last_name": "Ramos", "position": "Chief Executive Officer (CEO)", "office": "London", "start_date": "9th Oct 09", "salary": "$1,200,000" }

]

sometimes it can contain only "first_name" and "last_name".

I searched for a long time, all samples indicate "aoColumnsDef" or "aoColumns". But I do not know the exact places. Is there a way to populate a jquery datatable using the field name in json as the table header and the field value as the body of the table? For example, json data contains only two fields: "first_name" and "last_name", the table should contain two columns "first_name" and "last_name". If json contains 3 fields, the table should display 3 columns. I am sure that all elements in the "data" have the same fields.

Thanks in advance!

+6
source share
2 answers

Using the sample data, loop the first record as your “sample” data, then create the column definitions on the fly like this:

EDIT : sample code with xhr call to retrieve data

 $(document).ready(function() { //callback function that configures and initializes DataTables function renderTable(xhrdata) { var cols = []; var exampleRecord = xhrdata[0]; var keys = Object.keys(exampleRecord); keys.forEach(function(k) { cols.push({ title: k, data: k //optionally do some type detection here for render function }); }); var table = $('#example').DataTable({ columns: cols }); table.rows.add(xhrdata).draw(); } //xhr call to retrieve data var xhrcall = $.ajax('/path/to/data'); //promise syntax to render after xhr completes xhrcall.done(renderTable); }); 

 var data = [{ "first_name": "Airi", "last_name": "Satou", "position": "Accountant", "office": "Tokyo", "start_date": "28th Nov 08", "salary": "$162,700" }, { "first_name": "Angelica", "last_name": "Ramos", "position": "Chief Executive Officer (CEO)", "office": "London", "start_date": "9th Oct 09", "salary": "$1,200,000" }]; $(document).ready( function () { var cols = []; var exampleRecord = data[0]; //get keys in object. This will only work if your statement remains true that all objects have identical keys var keys = Object.keys(exampleRecord); //for each key, add a column definition keys.forEach(function(k) { cols.push({ title: k, data: k //optionally do some type detection here for render function }); }); //initialize DataTables var table = $('#example').DataTable({ columns: cols }); //add data and draw table.rows.add(data).draw(); }); 
 body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff; } div.container { min-width: 980px; margin: 0 auto; } 
 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <div class="container"> <table id="example" class="display" width="100%"> </table> </div> </body> </html>
+7
source

How to build a html string table from the received JSON first and only after this DataTable assembly using the created table.

 var table = $("#tableId"); table.append('<thead>....</thead>'); table.append('<tbody>....</tbody>'); table.DataTable();
0
source

More articles:


All Articles