CODEWITHSUNDEEP
jquerydatatables
user525146
user525146

Reputation: 3998

Cannot populate data in jQuery datatables

For some reason, my data is not getting populated in the table.

I have a JSON data and all I want is to fill the datatable.

Can someone help me and let me know which simple step am I missing ?

I have version 1.9.4.

<table id="example">
    <thead>
        <tr><th>name</th>
            <th>position</th>
            <th>salary</th>
            <th>start_date</th>
            <th>office</th>
            <th>extn</th>        
    </tr>
    </thead>
    <tbody></tbody>
</table>

$('#example').dataTable({
        data: [
            [
                "Tiger Nixon",
                "System Architect",
                "$3,120",
                "2011/04/25",
                "Edinburgh",
                "5421"
            ],
            [
                "Garrett Winters",
                "Director",
                "5300",
                "2011/07/25",
                "Edinburgh",
                "8422"
            ]
        ]

    });

fiddle

Upvotes: 1

Views: 1086

Answers (2)

davidkonrad
davidkonrad

Reputation: 85528

Here is a 1.9.4 example. You'll need to

  1. pass a JSON with objects, not an array
  2. target aaData, not data or aoData
  3. specify aoColumns, eg column -> json value

here I'm only using the first two "columns" of your data above :

var json = [
    { "name" : "Tiger Nixon", "position" : "System Architect" /*,.,.,.*/ },
    { "name" : "Garrett Winters", "position" : "Director"  /*,.,.,.*/ }
];

var table = $('#example').dataTable({
     aaData : json,
     aoColumns: [
        { mDataProp: "name" },
        { mDataProp: "position" }
    ]
});

fiddle -> http://jsfiddle.net/4e7myzmm/
the same in dataTables 1.10.x -> http://jsfiddle.net/c27jj9he/

Upvotes: 3

markpsmith
markpsmith

Reputation: 4918

Instead of data: , you need to use aaData:

$('#example').dataTable({
    aaData: [
      [...

By default DataTables will use the "aaData" property of the returned data which is an array of arrays with one entry for each column in the table. See docs

jsfiddle

Upvotes: 1

Related Questions