Question

13

how to load dynamic json to jquery datatable

rated 0 times [ 20] [ 7] / answers: 1 / hits: 17761 / 9 Years ago, mon, july 6, 2015, 12:00:00

I want to load dynamic data into my jquery datatable. That means, before I get the json data from server, I don't know what fields it contains, but I'm sure the json is valid. It will looks like below,

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 may only contains 'first_name' and 'last_name'.

I've searched a long time, all of the samples specify 'aoColumnsDef' or 'aoColumns'. But I don't know the exact fileds. Is there a way to fill jquery datatable using the field name in json as the header of the table and the field value as the body of the table? For example, the json data only contains two fields, 'first_name' and 'last_name', the table should contains two columns 'first_name' and 'last_name'. If the json contains 3 fields, the table should display the 3 columns. I'm sure all of the items in data have the same fields.

Thanks in advance!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacyl

Add To Favorites

Follow

Total Points: 131

Total Questions: 105

Total Answers: 94

Location: Egypt

Member since Tue, May 3, 2022

2 Years ago

answered 9 Years ago zariahdiamondz · Accepted Answer

Using your example data, loop over the first record as your 'example' data, then create the column definitions on the fly like so:

EDIT: example of original code with an 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>