can't create tables in a certain order
can't create tables in a certain order
horsed
Posts: 2Questions: 0Answers: 0
Hi everyone!
I'm struggling with a strange problem. I have two tables that lay inside the same HTML page. The user switches between these tables, which removes their table-tags from the page.
The problem is: Table 1 is only displayed correctly when table 2 hasn't been loaded before. There also is a third table that does not disturb the creation of table 1.
I played around with this for quite a while and found out that the problem disappears, when table 1 has the same column configuration AND types of content (string, decimal, int in the same order) as table 2.
I tried "bDestroy", fnClearTable() and fnDestroy() but it won't work.
It feels like there is an "instance" of a table 2 that remains in the memory and "collides" with a new instance of table 1 whenever table 1 is created.
The sample code below is simplified but it shows the same effect when table 2 is loaded before table 1.
[code]
// table 1
//***************************************************
// dummy data
var data = new Array();
var row = new Array();
row.push(1);
row.push("897n89jo");
data.push(row);
// fill and configure table
var oTable = $('#table1').dataTable({
"aaData": data,
"aoColumns":
[
{ "sTitle": "id", "bSearchable": false, "bVisible": false },
{ "sTitle": "contract number" }
],
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
[/code]
[code]
// table 2
//***************************************************
// dummy data
var data = new Array();
var row = new Array();
row.push(1);
row.push("red");
row.push("45g6g54f");
row.push("");
row.push(33.2);
row.push("2010-10-20 12:00:00");
data.push(row);
// fill and configure table
var oTable = $('#table2').dataTable({
"aaData": data,
"aoColumns":
[
{ "sTitle": "id", "bSearchable": false, "bVisible": false },
{ "sTitle": "hidden_status", "bVisible": false },
{ "sTitle": "contract number" },
{ "sTitle": "status", "bSortable" : false },
{ "sTitle": "volume", "sClass": "center" },
{ "sTitle": "last update" }
],
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
[/code]
Here is the error message i get in findbugs:
"oSettings.aoData[iRow] is undefined"
This is the line "return oSettings.aoData[iRow]._aData;" in fnGetData().
Thanks to everyone who tries to help me!
I'm struggling with a strange problem. I have two tables that lay inside the same HTML page. The user switches between these tables, which removes their table-tags from the page.
The problem is: Table 1 is only displayed correctly when table 2 hasn't been loaded before. There also is a third table that does not disturb the creation of table 1.
I played around with this for quite a while and found out that the problem disappears, when table 1 has the same column configuration AND types of content (string, decimal, int in the same order) as table 2.
I tried "bDestroy", fnClearTable() and fnDestroy() but it won't work.
It feels like there is an "instance" of a table 2 that remains in the memory and "collides" with a new instance of table 1 whenever table 1 is created.
The sample code below is simplified but it shows the same effect when table 2 is loaded before table 1.
[code]
// table 1
//***************************************************
// dummy data
var data = new Array();
var row = new Array();
row.push(1);
row.push("897n89jo");
data.push(row);
// fill and configure table
var oTable = $('#table1').dataTable({
"aaData": data,
"aoColumns":
[
{ "sTitle": "id", "bSearchable": false, "bVisible": false },
{ "sTitle": "contract number" }
],
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
[/code]
[code]
// table 2
//***************************************************
// dummy data
var data = new Array();
var row = new Array();
row.push(1);
row.push("red");
row.push("45g6g54f");
row.push("");
row.push(33.2);
row.push("2010-10-20 12:00:00");
data.push(row);
// fill and configure table
var oTable = $('#table2').dataTable({
"aaData": data,
"aoColumns":
[
{ "sTitle": "id", "bSearchable": false, "bVisible": false },
{ "sTitle": "hidden_status", "bVisible": false },
{ "sTitle": "contract number" },
{ "sTitle": "status", "bSortable" : false },
{ "sTitle": "volume", "sClass": "center" },
{ "sTitle": "last update" }
],
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
[/code]
Here is the error message i get in findbugs:
"oSettings.aoData[iRow] is undefined"
This is the line "return oSettings.aoData[iRow]._aData;" in fnGetData().
Thanks to everyone who tries to help me!
This discussion has been closed.
Replies
I didn't describe the problem precisely enough. But now that I just found the reason, I can provide a more detailed description: The two tables are created again and again on the same HTML page in a div-container called "content". After table 2 was created via [code]$('#table2).dataTable({ ... });[/code] I couldn't create table 1 anymore. I just got the "No matching results" row. That lead me to the _fnDraw() function since this is the place where this message is written into the table. The condition for that is an empty oSettings.aiDisplay array, so I searched for the reason why this array was empty and found out that each of the tables rows got deleted inside the _fnFilterCustom() function. This is where all custom filtering functions are applied to each row of a table and I certainly had a custom filtering function pushed into the $.fn.dataTableExt.afnFiltering array. But that filtering only worked on table 2 so each row in table 1 got filtered out. Does that mean that all custom filterings are applied to each table on creation or re-draw as long as they stay inside this array?
I could restrict each custom filtering function to a specific table by checking the table id or something like that.
Martin