Ajax DataTable Showing No Data

Ninja Joe

I have some rows of data, which I'm trying to show in a DataTable. It's an array of objects, but no data is being shown. What am I doing wrong?

jQuery

$( '#csv-datatable').DataTable( { ajax:{ url: '/json.php', dataSrc:'' }, scrollX: true, pagingType: 'full_numbers', drawCallback: function() {
    $( '.dataTables_paginate > .pagination' ).addClass( 'pagination-rounded' );
} } );

Sample JSON

{
   "data": [
      {
         "id": "0",
         "permit": "20221237",
         "status": "invalid"
      },
      {
         "id": "1",
         "permit": "20221292",
         "status": "valid"
      },
      {
         "id": "2",
         "permit": "20221232",
         "status": "valid"
      }
   ]
}

Result

kthorngren

One issue is you have dataSrc:'' but your data is in the data object which is the default location Datatables looks for. You can remove that. You don't show it but have you defined columns.data? See the Data and Ajax docs for more details.

Kevin

Ninja Joe

Hi kthorngren, I have deleted dataSrc:'', but no change; still getting "No data available in table."

I have not defined columns.date. Given my sample data, how would I define it in my call to $( '#csv-datatable').DataTable()?

kthorngren

Like this:

  "columns": [
    { "data": "id" },
    { "data": "permit" },
    { "data": "status" },
  ]

Kevin

Ninja Joe

That worked like a charm, thank you!