serverSide ajax returns data, but table says "no data available"
serverSide ajax returns data, but table says "no data available"
RossWHolland
Posts: 5Questions: 2Answers: 0
This is a great tool, and I am considering converting my whole site to use it, however there are a number of functions I need to get working before I can do that. My first table is static with a call on selection, so I just created table data and echoed this to the innerhtml of a DIV and then changed it to a data table - tick - works like a dream and so fast! My second table I need to be able to refresh, so am trying to use an ajax call to get the JSON data and then use the ajax.reload() function. My problem is that I cannot for some reason get the data to display. This is my code:
$(document).ready(function () {
getJSONData();
$('#AlertTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
url: "getJSONData.php?0=BookingAlert",
data: "data"
}
,
paging: true,
searching: false,
ordering: false,
lengthChange: false,
select: true,
"info": true
,
"columnDefs": [{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
]
})
});
My HTML is this:
<table class='table table-striped table-responsive table-bordered small' id='AlertTable'>
<thead>
<tr>
<th>ID</th><th>Type</th><th>Notes</th><th>Login ID</th><th>Closed</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And my JSON response looks like this:
{"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[{"AlertID":"1118","CodeDesc":"PO Line booked late","AlertNotes":"Should be shipped on Mon 28th May 2018","FullName":"Ross Holland","Sent":"0"}]}
NOTE: formatted below for ease of reading:
{
"draw":1,
"recordsTotal":1,
"recordsFiltered":1,
"data":[
{
"AlertID":"1118",
"CodeDesc":"PO Line booked late",
"AlertNotes":"Should be shipped on Mon 28th May 2018",
"FullName":"Ross Holland",
"Sent":"0"
}]
}
My table on the page however says "No data available in table".
I am sure I have some basic error in here, as it's not a hugely complicated one, but I've compared the JSON withe the examples, I have compared the definition of the datatable with the examples, and the HTML with the examples and cannot see what on earth is wrong. I get no error, and nothing on the Console.
Any help would be greatly appreciated. I have searched for hours for a solution and all the threads I have found seem to have issues which I don't believe I have. Can anyone spot the issue please?
Cheers
Ross
This question has an accepted answers - jump to answer
Answers
You are returning an array of objects which means you need to use
columns.datato define your columns. Please see this doc for more info regarding the data structures and how to implement them:https://datatables.net/manual/data/#Data-source-types
Kevin
Thanks Kevin, but that didn't make any difference I'm afraid. The data source is JSON from an ajax call, so I think this is slightly different.
What change(s) did you make?
The examples use a Javascript data source but its eh same for an ajax data source. You wouldn't use the
dataoption. The point is if you are returning objects the you need to define themcolumns.data. See this example:http://live.datatables.net/vijaqimu/1/edit
If you are still having issues then we can see if capturing debugger info will help:
https://datatables.net/manual/tech-notes/10#DataTables-debugger
Kevin
Hi Kevin,
I modified the definition as follows:
but that didn't work. However your note about not using the "data" option was the key as well, as I changed the ajax call to be
without the "data" bit, and hey presto! It works. Many thanks for the debugger info as well, that will be invaluable I am sure. I will mark your comment as answering the question
Hi, I'm facing the same issue. First time data appears but when i do any sorting now data is populating into table. I have checked the network calls. Server is responding fine something is wrong with datatable. Also "processing...." div is not hiding it seems UI does not know that response is back from server.
Using the browser's Network Inspector what is the JSON response? Can you paste it here?
Kevin