No data in table but datasrc shows data
No data in table but datasrc shows data
Hi I have a datatable that I am populating from a method in C#. The datatable returns some json which I have validated, however my columns never get populated and instead I get a message that says "No data available in table." I'm completely stuck so hoping someone can help!
```var table = $('#example').DataTable({
ajax: {
url: pageUrl,
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: "json",
dataSrc: function (data) {
console.log(data.d);
return $.parseJSON(data.d);
}
},
"pageLength": 50,
fixedHeader: true,
responsive: true,
"columns": [
{
"data": "key",
"render": function (data, type, row, meta) {
if (type === 'display') {
data = '<a href="/software/details.aspx?id=' + data + '">' + data + '</a>';
}
return data;
} },
{ "data": "summary" },
{ "data": "created" },
{ "data": "updated" },
{ "data": "Status" },
{ "data": "priority" },
{ "data": "reporter" },
{ "data": "assignee" }
],
autoWidth: false,
"columnDefs": [
{ "width": "50%", "targets": 0 },
{ "width": "5%", "targets": 1 },
{ "width": "5%", "targets": 2 },
{ "width": "5%", "targets": 3 },
{ "width": "5%", "targets": 4 },
{ "width": "5%", "targets": 5 }
],
"order": [[1, 'asc']],
"success": fnsuccesscallback,
"error": fnerrorcallback
});
function fnsuccesscallback(data) {
alert(data.d);
}
function fnerrorcallback(result) {
alert(result.statusText);
}```
And this is the data in the console.log output:
{"summary":"External Change Request Form: tester - 19/1/2021","created":"2021-01-19T15:32:02+00:00","updated":"2021-06-03T08:59:17+01:00","status":"To Do","key":"ITS-4711","assignee":"Bob","priority":"Low","reporter":"Dave"}
This question has an accepted answers - jump to answer
Answers
Is that the full response? Datatables expects an array of rows even if its just one row. Your data is not in an array. See the ajax docs for more details.
kevin
Hi, I altered two things;
The datasrc was converting it to json and it was already converted prior to passing it back, so I changed it to return data without parsing it:
Changed the formatting of the data that I was pulling back. Example below.
However I'm getting an error that says
And then it display 982 blank rows!
You have
"data": "key",
but your JSON response has"Key":"PGT-2766"
. Change it to"data": "Key"
. Javascript is case sensitive. Make sure the others match the case as well.Kevin
@kthorngren thanks changed it, but I still get the same problem!
Left my data the same and changed the datatable columns to look at this:
However I'm still getting the same error about Key and also a lot of empty rows!
if
data.d
is{ "data": [ {"Summa.....
then maybe you need to returndata.d.data
. Also make sure the array is an array not a string.Kevin
@kthorngren thanks for your help so far!
I was returning a string but I've now changed that over to an object in C# and when I output it to the console I get this:
When I try and return data.d.data in the dataSrc I get an undefined.
I'm still getting the same issue as before with tons of empty rows!
I've also tried this which hasn't worked either
The escaped quotes (
\"
) suggest that the data is JSON encapsulated twice by the server. See if Colin's answer in this thread helps.Kevin
@kthorngren Thank you!!! That looks to have got me one step closer woo hoo!!!
So by doing this:
I now get this!
However the datatable now says no data available!
I've double checked and my column names are correctly capitalised and match up with the names being pulled back in that array.
Do I need to reference my columns differently? I've tried data: and data.d just in case that made a difference.
The option is
columns.data
to define the columns.{ "data.d": "key" }
won't work. Looking at the examples in theajax.dataSrc
docs the last example shows using a function. Its returningjson.data
which looks like this by default{"data": [...]}
. Based on that I think your function should look something like this:Kevin
@kthorngren that has worked!!!! Thank you so much - you have been a phenomenal help!!!