DataTables v1.10.0-beta.2 ajax dynamic creation almost working but I think there's a bug somewhere..

curveddesign · February 2014

I have a dynamic DataTables example that is almost working that uses a generated HTML from ajax but I can't get the column headers to show... This generates a working table but it wont get the column names? Anyone else have this working?

Here is my code...

[code]

jQuery( document ).ready( function( $ ) {
// Code using $ as usual goes here.
$('#demo').html( '' );
$('#example').dataTable( {
"ajax": "objects-dynamic.txt",
//"dataSrc": "data",
//"aoColumns": [
// { "sTitle": "Index" },
// { "sTitle": "Name" },
// { "sTitle": "Age" },
// { "sTitle": "Image" }
//],
"columns": [
{ "data": "Index" },
{ "data": "Name" },
{ "data": "Age" },
{ "data": "Image" }
]
});
});

[/code]

[code]
{
"data":[
{
"Index": 4,
"Name": "Bob",
"Age": 7,
"Image": "None"
},
{
"Index": 2,
"Name": "Timmy",
"Age": 4,
"Image": "None"
},
{
"Index": 3,
"Name": "Heather",
"Age": 55,
"Image": ""
}
],
"columns": [
{ "data": "Index" },
{ "data": "Name" },
{ "data": "Age" },
{ "data": "Image" }
]
}
[/code]

The idea comes from the 1.9.2 version of dynamic creation here http://datatables.net/release-datatables/examples/data_sources/js_array.html

curveddesign · February 2014

Whoops, forgot to add the code, see below.

[code]

jQuery( document ).ready( function( $ ) {
// Code using $ as usual goes here.
$('#demo').html( '' );
$('#example').dataTable( {
"ajax": "objects-dynamic.txt",
//"dataSrc": "data",
//"aoColumns": [
// { "sTitle": "Index" },
// { "sTitle": "Name" },
// { "sTitle": "Age" },
// { "sTitle": "Image" }
//],
"columns": [
{ "data": "Index" },
{ "data": "Name" },
{ "data": "Age" },
{ "data": "Image" }
]
});
});

[/code]

PeteB · February 2014

A possible solution may be to change your html to:

$('#demo').html( 'IndexNameAgeImage
' );

allan · February 2014

You need to use the `title` option to set the title for a column: http://next.datatables.net/reference/option/columns.title .

There is no option for DataTables to read column information from an Ajax source at this time.

Allan

allan · February 2014

What @PeteB says as well :-)

curveddesign · February 2014

Thanks Alan, using the title option I got the dynamic table to work with the objects-dynamic.txt ajax file in my initial post! The example code is below....

P. S. Alan, I love datatables v1.10! Feature request ;-) It would be great if the columns info could be loaded from the ajax source too along with the data!

[code]

jQuery( document ).ready( function( $ ) {
// Code using $ as usual goes here.
$('#demo').html( '' );
$('#example').dataTable( {
"ajax": "objects-dynamic.txt",
"columns": [
{ "title": "Index", "data" : "Index" },
{ "title": "Name", "data": "Name" },
{ "title": "Age", "data": "Age" },
{ "title": "Image", "data": "Image" }
],
});
});

[/code]

allan · February 2014

Agreed. Not going to happen for 1.10.0 release, as we are well into the beta cycle already, but it would be good for 1.11...

Allan

curveddesign · February 2014

Allan, it looks like loading everything dynamically, including the columns, from ajax may already be working in 1.10-beta.2!!!

Check this out! This is so cool!

Here is the code...

[code]

jQuery( document ).ready( function( $ ) {
// Code using $ as usual goes here.
$('#demo').html( '' );
$.ajax( {
"url": 'objects-dynamic.txt',
"success": function ( json ) {
$('#example').dataTable( json );
},
"dataType": "json"
} );
});

[/code]

[code]
{
"data":[
{
"Index": 4,
"Name": "Bob",
"Age": 7,
"Image": "None"
},
{
"Index": 2,
"Name": "Timmy",
"Age": 4,
"Image": "None"
},
{
"Index": 3,
"Name": "Heather",
"Age": 55,
"Image": ""
},
{
"Index": 5,
"Name": "Sally",
"Age": 22,
"Image": "None"
}
],
"columns": [
{ "title": "Index", "data" : "Index" },
{ "title": "Name", "data": "Name" },
{ "title": "Age", "data": "Age" },
{ "title": "Image", "data": "Image" }
]
}
[/code]

allan · February 2014

Yup - that will work very nicely! The only one thing you can't do that way is use callback functions - since that isn't valid JSON. But you can do everything else :-)

Allan

big_mac · March 2014

I tried something similar as above

[code]

ColVis example - Two tables with individual controls

function InitOverviewDataTable()
{
$.getJSON("./test.json", null, function( json ){
var column_data = [];
var column_def = [];
var temp = [];
var temp2 = [];
temp2 = json.aaData;

$.each(temp2[0], function(key, value)
{
temp.push({ "title": key, "data": key });
});
column_def = JSON.stringify(temp);
column_data = JSON.stringify(temp2);

console.log(column_def);
console.log(column_data);
console.log(temp);
console.log(temp2);

oTable = $("#example1").DataTable( {
"data": [column_data],
"columns": [column_def]
});
});
}

$(document).ready(function () {
InitOverviewDataTable();
});

[/code]

the json file looks like:

{
"aaData": [
{
"Account City": "San Antonio",
"Account Country": "United States",
"Account State": "TX",
"Activity TS": "blah"

}, {
"Account City": "Plymouth",
"Account Country": "United States",
"Account State": "MN",
"Activity TS": "blah"
}
]
}

I get the following:

[{"title":"Account City","data":"Account City"},{"title":"Account Country","data":"Account Country"},{"title":"Account State","data":"Account State"},{"title":"Activity TS","data":"Activity TS"}] index.html:32
[{"Account City":"San Antonio","Account Country":"United States","Account State":"TX","Activity TS":"blah"},{"Account City":"Plymouth","Account Country":"United States","Account State":"MN","Activity TS":"blah"}] index.html:33
Array[4]
index.html:34
Array[2]
index.html:35
Uncaught TypeError: Cannot use 'in' operator to search for '194' in [{"title":"Account City","data":"Account City"},{"title":"Account Country","data":"Account Country"},{"title":"Account State","data":"Account State"},{"title":"Activity TS","data":"Activity TS"}]

Any thoughts what I could be doing wrong?

allan · March 2014

Can you run the debugger over your table, or link us to a test case please?

Allan

big_mac · March 2014

Here is the debug output :
http://debug.datatables.net/udohis

big_mac · March 2014

If I pass it just the javascript array the temp value for columns it doesnt error but shows :

[object Object] as the column

http://debug.datatables.net/oqilob

The init values and columns values look rigght.

allan · March 2014

For the first debug trace it shows you are passing in:

[code]
{
"data": [
[{
"Account City": "San Antonio",
"Account Country": "United States",
"Account State": "TX",
"Activity TS": "blah"
}, {
"Account City": "Plymouth",
"Account Country": "United States",
"Account State": "MN",
"Activity TS": "blah"
}]
],
"columns": ["[{\"title\":\"Account City\",\"data\":\"Account City\"},{\"title\":\"Account Country\",\"data\":\"Account Country\"},{\"title\":\"Account State\",\"data\":\"Account State\"},{\"title\":\"Activity TS\",\"data\":\"Activity TS\"}]"]
}
[/code]

So two errors:

1. Your `data` array is an array inside an array. You just want an array of objects.

2. Your are padding in `columns` as an array with a single entry which itself is a string. You want to pass in an array with objects (this is fixed in your second debug trace).

Fix those issues and I think it should start working.

Allan

big_mac · March 2014

Ok 1 and 2 are fixed.

I get :

Uncaught TypeError: Cannot read property 'style' of undefined jquery.dataTables.js:3894
_fnCalculateColumnWidths jquery.dataTables.js:3894
_fnInitialise jquery.dataTables.js:3031
(anonymous function) jquery.dataTables.js:6219
n.extend.each jquery.js:2
n.fn.n.each jquery.js:2
DataTable jquery.dataTables.js:5764
$.fn.DataTable jquery.dataTables.js:14040
(anonymous function) index.html:32
j jquery.js:2
k.fireWith jquery.js:2
x jquery.js:4
b jquery.js:4

http://debug.datatables.net/uxuhum

big_mac · March 2014

I figured it out . Had to remove the inner part of the table from:

to:

allan · March 2014

Yup - if you are having DataTables create the columns for you, you need to have an empty thead, or not have a thead at all. Otherwise DataTables will read the column information from the HTML. I'll make sure this is mentioned in the documentation.

Allan

klin · March 2014

Today's my first day using DataTables and I've been very pleased so far. I am twisting some ajax around to fit DataTables and also needed dynamic headers, so @curveddesign's post helped tremendously ...

http://datatables.net/forums/discussion/comment/57577#Comment_57577

Thanks!
Ken

klin · March 2014

BTW, the passage in the manual pertaining to @curveddesign's post (http://datatables.net/forums/discussion/comment/57577#Comment_57577) is here ...

http://next.datatables.net/manual/data#Objects
[code]
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]
[/code]
[code]
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
} );
[/code]

DataTables v1.10.0-beta.2 ajax dynamic creation almost working but I think there's a bug somewhere..

DataTables v1.10.0-beta.2 ajax dynamic creation almost working but I think there's a bug somewhere..

Replies

Howdy, Stranger!

Categories

DataTables

DataTables v1.10.0-beta.2 ajax dynamic creation almost working but I think there's a bug somewhere..

DataTables v1.10.0-beta.2 ajax dynamic creation almost working but I think there's a bug somewhere..

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables