Managing multiple data tables (initializing them separately)
Managing multiple data tables (initializing them separately)
I have an app that allows for querying a (Salesforce.com) database. With each query result, I need to create a table and enable Data Tables for it. I have the basic query..create table working fine right now. I have a DIV wrapping around all tables. Upon initial page load, the DIV is empty.
User can then run a query so I call the server and initialize a Data Table inside the DIV. The ID for the table I generate is not known until I actually generate it. With an existing table on the page, I need to figure out how to handle these 2 scenarios...
1) A new query is run and it is meant to replace the existing tables on the page. Before creating the new table, I want to destroy any and all tables in the DIV.
Please confirm the approach. I'd like to make sure and rid the system of all memory of the tables.
[code]
// Destroy each datatable in the div
var allTables = jQuery('#allDataTables table.display');
for(var i = 0; i < allTables.length; i++) {
jQuery('#' + allTables[i].id).dataTable().fnDestroy();
}
// Clear the DIVs html
jQuery('#allDataTables').html('');
[/code]
2) *** MOST IMPORTANT *** A new query is run and I need to create a NEW table, but want to KEEP the existing, already initialized table as-is. The problem I face now is that when I initialize the second table, it erases the first table. I want it to essentially add on a second table below the first. Both tables may have completely different columns and settings.
User can then run a query so I call the server and initialize a Data Table inside the DIV. The ID for the table I generate is not known until I actually generate it. With an existing table on the page, I need to figure out how to handle these 2 scenarios...
1) A new query is run and it is meant to replace the existing tables on the page. Before creating the new table, I want to destroy any and all tables in the DIV.
Please confirm the approach. I'd like to make sure and rid the system of all memory of the tables.
[code]
// Destroy each datatable in the div
var allTables = jQuery('#allDataTables table.display');
for(var i = 0; i < allTables.length; i++) {
jQuery('#' + allTables[i].id).dataTable().fnDestroy();
}
// Clear the DIVs html
jQuery('#allDataTables').html('');
[/code]
2) *** MOST IMPORTANT *** A new query is run and I need to create a NEW table, but want to KEEP the existing, already initialized table as-is. The problem I face now is that when I initialize the second table, it erases the first table. I want it to essentially add on a second table below the first. Both tables may have completely different columns and settings.
This discussion has been closed.
Replies
2. Is this not just as simple as not calling fnDestroy on the old table? Each table would be independent, particularly if you are initialising them separately, so there should be nothing stopping you adding another tag and running DataTables over that.
Allan
RE 2, I am an idiot. It wasn't Data Tables that was causing my issue (thankfully). It was due to something in the Salesforce.com architecture that "re-rendered" a DIV and caused the table to get cleared.
Enjoy the donation. Hopefully the exchange rate didn't make it useless.