Initialize data table with json columns

Odyn

Hello

I am trying to use DataTables to build dynamic table based on JSON file which I have

My JSON file looks like this:

[
   {
      "ID":"1",
      "InvoiceNumber":"12344",
      "PagesCount":"3",
      "Status":"New"
   },
   {
      "ID":"2",
      "InvoiceNumber":"12345",
      "PagesCount":"6",
      "Status":"New"
   }
]

Have just 4 fields like record ID, InvoiceNumber, PagesCount, Status

Have HTML table like:

        <table id="jobs" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>InvoiceNumber</td>
                    <td>PagesCount</td>
                    <td>Status</td>
                </tr>
            </thead>
        </table>

And a little JS code:

$(document).ready(function() {
    $('#jobs').DataTable( {
        "dom" : "<'row'<'small-6 columns dash-toolbar'><'small-6 columns'f>r>"+
                "t"+
                "<'row'<'small-6 columns'i><'small-6 columns'p>>",
        "lengthMenu": [ 15, 25, 50, 75, 100 ],
        "lengthChange": false,
        "ajax": '/dashboarddata?jobs=get_all'
    } );
} );

Could You please tell me why my json data is not loaded into the table?

kthorngren

Looks like you need to use ajax.dataSrc to tell Datatables where to find the data. Something like this:

"ajax": {
  url: '/dashboarddata?jobs=get_all',
  dataSrc: ""
},

Kevin

Odyn

Thank You Kevin

It looks it works fine now

$(document).ready(function() {
    $('#jobs').DataTable( {
        "dom" : "<'row'<'small-6 columns dash-toolbar'><'small-6 columns'f>r>"+
                "t"+
                "<'row'<'small-6 columns'i><'small-6 columns'p>>",
        "lengthMenu": [ 15, 25, 50, 75, 100 ],
        "lengthChange": false,
        "ajax": {
          url: '/dashboarddata?jobs=get_all',
          dataSrc: ""
        },
        "columns": [
            { "data": "ID" },
            { "data": "InvoiceNumber" },
            { "data": "PagesCount" },
            { "data": "Status" }
        ]
    } );
} );

Thank You!