Dynamically define columns
Dynamically define columns
Hello,
I'm trying to dynamically define columns at runtime, and actually could do this - I can see my columns in table. But my records are not loaded, what am I missing?
HTML table:
[code]
[/code]
Load columns first: I define columns by adding an aoColumns array to the json, like:
JSON sample:
[code]
{ "sEcho":0, "iTotalRecords":10, "iTotalDisplayRecords":10,"aoColumns": [{"mDataProp": "EntityID"}, {"mDataProp": "Category"}, {"mDataProp": "EntityName"}],
"aaData": [
{
"EntityID": "1",
"Category": "1",
"EntityName": "Hello"
}
]
}
[/code]
Javascript:
[code]
jQuery(function ($) {
var columns = [];
var col = function(name)
{
this.sTitle = name;
this.mDataProp = name;
}
var jqxhr = $.getJSON(myURL, function (json) {
$.each(json.aoColumns, function () {
var c = new col(this.mDataProp);
columns.push(c);
});
populate(json); // populate table
});
function populate(data)
{
console.log('populate ' + columns.length + ' cols, ' + data.length + ' rows'); // giving the correct number of columns and rows
var dtt = $('#thetable').dataTable({
"bProcessing": true,
"bServerSide": true,
"aaData": data,
"aoColumns": columns,
"bJQueryUI": true,
"bPaginate": true,
"bDestroy": true
});
}
});
[/code]
My populate function actually builds the table and shows columns headings, but no rows are added. If I revert to a standard model, statically defining columns and loading with sAjaxSource all works good.
What am I missing?
Thanks for any suggestion,
al.
I'm trying to dynamically define columns at runtime, and actually could do this - I can see my columns in table. But my records are not loaded, what am I missing?
HTML table:
[code]
[/code]
Load columns first: I define columns by adding an aoColumns array to the json, like:
JSON sample:
[code]
{ "sEcho":0, "iTotalRecords":10, "iTotalDisplayRecords":10,"aoColumns": [{"mDataProp": "EntityID"}, {"mDataProp": "Category"}, {"mDataProp": "EntityName"}],
"aaData": [
{
"EntityID": "1",
"Category": "1",
"EntityName": "Hello"
}
]
}
[/code]
Javascript:
[code]
jQuery(function ($) {
var columns = [];
var col = function(name)
{
this.sTitle = name;
this.mDataProp = name;
}
var jqxhr = $.getJSON(myURL, function (json) {
$.each(json.aoColumns, function () {
var c = new col(this.mDataProp);
columns.push(c);
});
populate(json); // populate table
});
function populate(data)
{
console.log('populate ' + columns.length + ' cols, ' + data.length + ' rows'); // giving the correct number of columns and rows
var dtt = $('#thetable').dataTable({
"bProcessing": true,
"bServerSide": true,
"aaData": data,
"aoColumns": columns,
"bJQueryUI": true,
"bPaginate": true,
"bDestroy": true
});
}
});
[/code]
My populate function actually builds the table and shows columns headings, but no rows are added. If I revert to a standard model, statically defining columns and loading with sAjaxSource all works good.
What am I missing?
Thanks for any suggestion,
al.
This discussion has been closed.
Replies
[code]
"aaData": data,
[/code]
to
[code]
"aaData": data.aaData,
[/code]
in my populate function.
Hope this helps somebody else.