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..
curveddesign
Posts: 4Questions: 0Answers: 0
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
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
This discussion has been closed.
Replies
[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]
$('#demo').html( 'IndexNameAgeImage
' );
There is no option for DataTables to read column information from an Ajax source at this time.
Allan
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
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
[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
http://debug.datatables.net/udohis
[object Object] as the column
http://debug.datatables.net/oqilob
The init values and columns values look rigght.
[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
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
to:
Allan
http://datatables.net/forums/discussion/comment/57577#Comment_57577
Thanks!
Ken
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]