Problem with dynamic loading of data.

tsiridak

Hi all, I am new to DataTables (DT) and experimenting with its functionality.
In my first test I used Data (DT) to format a preloaded table and then inserting rows to the table.
I am now trying to load data by fetching the data from the server as json table and then use DT to load and format the data and here I am getting a problem that I have not been able to resolve.
The code fragment is as follows:

jQuery.ajax({
type:"POST",
url: ajaxurl,
})
.done(function(data){
// parse json response to object
var customer_data = JSON.parse(data);
console.log(customer_data);
console.log(customer_data[0]);
console.log(customer_data[0].id);
console.log(customer_data[0].name);
console.log(customer_data[0].phone);
console.log(customer_data[0].email);
console.log(customer_data[0].address);
// load customer table
//document.getElementById("feedback").innerHTML = c1+" "+c2+" "+c3+" "+c4+" "+c5+" ";
(function($) {
$('#cTable').DataTable( {
"data": customer_data,
"columns": [
{title: "id"},
{title: "name"},
{title: "email"},
{title: "phone"},
{title: "address"}
],
"scrollY": 200,
"scrollX": true
} );
})( jQuery );
…..
With the above code DT issues the following error message 2 tmes:

“DataTables warning table id=cTable – Requested unknown parameter ‘0’ for row ‘0’, column 0. For more information about this error, please see http://datatables.net/tn/4”

Continuing the table has been formatted but no data are available.

My understanding is that the problem relates to the data, that’s the reason for the console log that comes correct:

Array(41) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
Object { id: "1", name: "James Bruce", email: "jamesbruce@makeuseof.com", phone: "2147483647", address: "London England" }
1
James Bruce
2147483647
jamesbruce@makeuseof.com
London England

Any idea what am I doing wrong?
Any assistance will be very much appreciated.

Best Regards, Dimitris

kthorngren

Did you follow the troubleshooting steps in the link provided?
http://datatables.net/tn/4

The problem is you are using object based data but haven't configured Datatables to use object data. Datatables is looking for array based data. To fix this use columns.data.

Kevin

tsiridak

Thanks for your quick response. At least to me it's not obvious on how to set this option and I have already read multiple times the "columns.data Option". Also all relevant examples are not using this option or the array is listed as part of the datatables request.
Anyway it will be very much appreciated if you can provide an example!
Thanks in advance, Dimitris

kthorngren

You would use this:

"columns": [
{data: "id, "title: "id"},
{data: "name", title: "name"},
{data: "email", title: "email"},
{data: "phone", title: "phone"},
{data: "address", title: "address"}
],

Kevin

tsiridak

Many ... many thanks, this is it.
Regards, Dimitris