dynamic column headers

arthink1

Hi all,
Great plugin. very useful but I"m having a little trouble creating dynamic column headers.
I get my input from a json php file which starts out loooking like this...
{ "aoColumns": [
{ "sTitle": "ID" },
{ "sTitle": "Name" },
{ "sTitle": "Eid" },
{ "sTitle": "Email" }
],
"aaData": [
[ "11", // and the rest of the data

the calling php page defines the table like so,




a
b
c
d



I'm using a,b,c,d, as column titles just so something shows up. Since I create the json input file depending on the user input, I'd like to the column titles to match. I've gone through the examples but i'm not sure what i'm doing wrong as it doesn't work. Here's the js to define the table instantiate
$("#list").dataTable( {
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "http://wncg.ece.utexas.edu/intranet/admin/list.php?was=<?php echo $lookup;?>",
"aaSorting": []
} );

Thanks
Adrian

allan

Hi Adrian,

Thanks for the compliments about DataTables :-)

DataTables doesn't actually process anything other than aaData when using a json source (it's wrapped in an object to allow for flexibility, both in the future, and for you the developer). So what you need to do is pass the aoColumns array as part of the initialisation object. Perhaps something like this would do the trick for you - it will get your json data and then initialise the DataTable:

[code]
$.getJSON( "http://wncg.ece.utexas.edu/intranet/admin/list.php?was=<?php echo $lookup;?>", null, function (json) {
$("#list").dataTable( {
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aaData": json.aaData,
"aoColumns": json.aoColumns
} );
} );
[/code]

Other options are to use the Initialisation callback option to update the table header as required (I've just made a small change to my development version which will pass the json object for the server to the fnInitComplete() function for this kind of thing. I'll release this in the next 1.5 beta.

Hope this helps,
Allan

arthink1

Awesome Allan, Thanks. Works pretty good.

Adrian

thenewer

Hi, I am through the Same Problem!

I have the following COde!

[code]
$(document).ready(function() {
$('#eData').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "abc.php",
"sPaginationType": "full_numbers",
"aaSorting": [[1,'asc']],
"iDisplayStart": 0,
"sEcho":1,
"bLengthChange":false,
"aoColumns": [
{"sName": "projectid", "sTitle": ID", "sWidth": "10%", "bSortable": "true"},
{"sName": "name", "sTitle": "Name", "sWidth": "20%", "bSortable": "true"}
]
});
});

Now the Problem i get the JSOn response but the data returned does not match the headers i defined, it shows the data on rong columns, please correct me where this left out!

by theway very great Plugin

Awesome :)

[/code]