Can i set the table column names dynamically by getting them from Ajax?

PhaniKiran

Hi,

I need to construct the table dynamically. The number of columns and their order varies as per the query selected to run by the user. Even though i set the "aoColumns" properly in the JSON, i am getting an error like "TypeError: oColumn is undefined".

Below is the data table i am trying:

[code]
$(document).ready(function() {
$('#dynamic').html( '' );
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 5,
"sAjaxSource": "server_processing.php",
"bLengthChange": false,
"bFilter": false,
"bSort": false
} );
} );
[/code]

Below is the JSON that is being provided by the server_processing.php script:

[code]
{"sEcho":1,"iTotalRecords":"57","iTotalDisplayRecords":"57","aaData":[["Trident","Internet Explorer 4.0","Win 95+","4","X"],["Trident","Internet Explorer 5.0","Win 95+","5","C"],["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],["Trident","Internet Explorer 6","Win 98+","6","A"],["Trident","Internet Explorer 7","Win XP SP2+","7","A"]],"aoColumns":["{ \"sTitle\": \"Engine\"}","{ \"sTitle\": \"Browser\"}","{ \"sTitle\": \"Platform\"}","{ \"sTitle\": \"Version\"}","{ \"sTitle\": \"Grade\"}"]}
[/code]

Please check and help if i am doing something wrong. Thanks in advance.

rborman

Is there a reason for 'stringify-ing' the objects in the aoColumns property? If you remove the double quotes around the objects (and the double quote escape character around the keys and values) the column names are displayed, e.g.:

"aoColumns":[{ "sTitle": "Engine"},{ "sTitle": "Browser"},{ "sTitle": "Platform"},{ "sTitle": "Version"},{ "sTitle": "Grade"}]

Regards, Ronald.

PhaniKiran

Hi Ronald,
Thanks for your kind response. I corrected it and still the same error.
Please find below the updated JSON that's being sent by the php script.

[code]
{"sEcho":1,"iTotalRecords":"57","iTotalDisplayRecords":"57",
"aoColumns":
[
{"sTitle":"Engine"},
{"sTitle":"Browser"},
{"sTitle":"Plat"},
{"sTitle":"Ver"},
{"sTitle":"Grade"}
],
"aaData":[["Trident","Internet Explorer 4.0","Win 95+","4","X"],["Trident","Internet Explorer 5.0","Win 95+","5","C"],["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],["Trident","Internet Explorer 6","Win 98+","6","A"],["Trident","Internet Explorer 7","Win XP SP2+","7","A"]]}

[/code]

The same JSON works if i uncomment the dynamic table being added and hard-code the tag of table in html.

The error i get is TypeError: oColumn is undefined at line number 6705 of latest dataTables.js script

PhaniKiran

I added the debugger here, just in case required:

http://debug.datatables.net/areder

allan

The answer is no - I'm sorry to say you cannot do that in DataTables at this time. The full range of options that are available in aoColumns cannot be represented in JSON (specifically functions) so there is no method for this in DataTables at this time. I might relax that in future, but at the moment you'll need to make an Ajax request to get the column information yourself.

Allan

PhaniKiran

Hi Allan,
Thanks for the response. Does that leave with making 2 Ajax calls to solve this problem?
First call to just get the column names and it will be called only once. And the second call to get the data. Some thing like below:

[code]
$.ajax("test1.php",
{type: "GET",dataType: "json",
success: function(data)
{
var aryColTableChecked = data;
var aryJSONColTable = [];
for (var i=0; i < aryColTableChecked.length; i++ )
{
aryJSONColTable.push(
{
"sTitle": aryColTableChecked[i],
"aTargets": [i]
});
};
$(document).ready(function()
{
$('#dynamic').html( '' );
$('#example').dataTable( {
"bProcessing": true,
"sPaginationType": "full_numbers",
"bServerSide": true,
"iDisplayLength": 5,
"sAjaxSource": "server_processing.php",
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"aoColumnDefs": aryJSONColTable
} );
} );
}
});

[/code]

Thanks

allan

> Does that leave with making 2 Ajax calls to solve this problem?

With server-side processing enabled, yes, I'm sorry to say it does.

Allan