fnAddData() changing table settings?

Kyprus

Here's my situation, I create a blank table when the page loads and it works fine. When I go to add data using fnAddData(), most options that I set when I created the table revert to default settings. i.e If I have "bFilter": false after adding the data the filter bar is back. Same thing with info bar and Show x entries. The data does get added though.

Table Setup:

[code]
$("#overviewGrid").dataTable({

"bJQueryUI": true,
"bAutoWidth": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,

"aoColumns": [
{ "sTitle": "Column 1" },
{ "sTitle": "Column 2" },
{ "sTitle": "Column 3" },
{ "sTitle": "Column 4"}
],

//I need this for it to even be able to add anything
"aaData": [

["", "", "", ""]
]
});
[/code]

Add data:
[code]
$("#overviewGrid").dataTable().fnAddData([

"1",
"2",
"3",
"4"
]);
[/code]

Also another question, If I don't have any initial data set the table renders fine but when I try to add it there is a javascript error (doesn't work at all). If there is initial data it appends it just fine?

Thanks

Kyprus

Well I came up with a kind of nasty workaround but it works. Basically I created a function to create the grid that checks if it's already there. If it is, it destroys it and creates it again using the supplied data, if not it just creates it with a default piece of data.

[code]
function createGrid(tableID, data) {

if (!data) data = [["No data.", "", "", ""]];

destroy = false;
if ($("#" + tableID + " .thead").length > 0) destroy = true;

if (destroy) $("#" + tableID).dataTable("destory");

$("#" + tableID).dataTable({

"bJQueryUI": true,
"bAutoWidth": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,

"aoColumns": [
{ "sTitle": "Column 1" },
{ "sTitle": "Column 2" },
{ "sTitle": "Column 3" },
{ "sTitle": "Column 4"}
],

"aaData": data
});
}
[/code]

This seems to solve both of my previous problems.

allan

Hi Kyprus,

The problem here is that you are initialising the table twice! (i.e. calling $().dataTable twice - which you are not allowed to do...). What to do instead is this:

[code]
var oTable = $("#overviewGrid").dataTable({
"bJQueryUI": true,
"bAutoWidth": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,

"aoColumns": [
{ "sTitle": "Column 1" },
{ "sTitle": "Column 2" },
{ "sTitle": "Column 3" },
{ "sTitle": "Column 4"}
],

//I need this for it to even be able to add anything
"aaData": [

["", "", "", ""]
]
});

oTable.fnAddData([
"1",
"2",
"3",
"4"
]);
[/code]
And then use the object reference oTable whenever you want to call the API functions.

Regards,
Allan

Kyprus

Ok, that worked great. Thanks Allan!

iuliandum

Hi Kyprus,

I tried to use [code] $("#" + tableID).dataTable("destroy"); [/code] to destroy table from your example but don't working.
I want to destroy initial table to change feature (aaSortingFixed) and then re-initialize the table.
Thank's to everyall that can help me!

allan

Hi iuliandum,

The 'dataTable("destroy");' code is wrong and will not work. There currently is no way to destroy a table after it has been initialised as a DataTable. Been meaning to write a plug-in API function for it, but not got around to it yet. Please refer to your other thread for the discussion on how to change aaSorting etc post initialisation.

Regards,
Allan