Dynamic Column Names
Dynamic Column Names
luketheobscure
Posts: 20Questions: 0Answers: 0
I've got DataTables working fine on my page- the only problem I have is dynamically declaring the table headers. I'm using an existing JSON object instead of using DataTables built in AJAX functions (for various reasons). Here's what I've tried so far...
Normal (works):
[code]
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": [ {"sTitle": "Name"}, {"sTitle": "County"} ]
});
[/code]
Give it the JSON (doesn't work):
[code]
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": results.COLUMNS
});
[/code]
Give it a string var (doesn't work):
[code]
jQuery.each(results.COLUMNS, function(i, value){
column_names += '{"sTitle": "'+ value + '"}';
if (i+1 != results.COLUMNS.length) column_names += ", ";
}
); // This creates the string '{"sTitle": "NAME"}, {"sTitle": "COUNTY"}' - confirmed in FireBug.
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": [ column_names ]
});
[/code]
Give it an object var (doesn't work):
[code]
function(results){
var columns = new Array();
jQuery.each(results.COLUMNS, function(i, value){
columns.push(column_name={stitle: value})
}
); //Creates the object, confirmed in FireBug
};
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": [ columns ]
});
[/code]
Help?
PS: The code examples were just typed up- there may be some stray commas or something. All the code (and variables) were tested in the browser.
Normal (works):
[code]
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": [ {"sTitle": "Name"}, {"sTitle": "County"} ]
});
[/code]
Give it the JSON (doesn't work):
[code]
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": results.COLUMNS
});
[/code]
Give it a string var (doesn't work):
[code]
jQuery.each(results.COLUMNS, function(i, value){
column_names += '{"sTitle": "'+ value + '"}';
if (i+1 != results.COLUMNS.length) column_names += ", ";
}
); // This creates the string '{"sTitle": "NAME"}, {"sTitle": "COUNTY"}' - confirmed in FireBug.
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": [ column_names ]
});
[/code]
Give it an object var (doesn't work):
[code]
function(results){
var columns = new Array();
jQuery.each(results.COLUMNS, function(i, value){
columns.push(column_name={stitle: value})
}
); //Creates the object, confirmed in FireBug
};
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": [ columns ]
});
[/code]
Help?
PS: The code examples were just typed up- there may be some stray commas or something. All the code (and variables) were tested in the browser.
This discussion has been closed.
Replies
[code]
{"COLUMNS":["NAME","COUNTY"],"DATA":[[" John Doe","Fresno"],["Billy,"Fresno"],["Tom","Kern"],["King Smith","Kings"]]}
[/code]
Resulting table renders correctly, just without the column names.
[code]
{"COLUMNS":[{ sTitle: "NAME"}, { sTitle: "COUNTY"}],"DATA":[[" John Doe","Fresno"],["Billy,"Fresno"],["Tom","Kern"],["King Smith","Kings"]]}
[/code]
you can use any of the "init options - columns" values listed on http://www.datatables.net/ref or follow the examples at http://www.datatables.net/examples/
In the end, I added this right before I declared my dataTable:
[code]
var columns = [];
jQuery.each(results.COLUMNS, function(i, value){
var obj = { sTitle: value };
columns.push(obj);
});
[/code]
In case anyone else is looking, this takes the native way that ColdFusion returns JSON columns and puts it into what dataTables expects.