Cannot populate data in jQuery datatables

Question

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

davidkonrad · Accepted Answer · 2014-09-29 09:20:05Z

3

Here is a 1.9.4 example. You'll need to

pass a JSON with objects, not an array
target aaData, not data or aoData
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/

answered Sep 29, 2014 at 9:20

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

markpsmith · Accepted Answer · 2014-09-29 09:18:52Z

1

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

answered Sep 29, 2014 at 9:18

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

Collectives™ on Stack Overflow

Cannot populate data in jQuery datatables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related