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

curveddesign

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

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

A possible solution may be to change your html to:

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

allan

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

What @PeteB says as well :-)

curveddesign

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

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

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

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

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

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

Allan

big_mac

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

big_mac

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

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

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

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





to:

allan

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

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

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]