Problems adding records to existing table by ID, with multiple tables on the same page

stevel

Hi there,

I'm attempting to use dataTables inside a workflow with a variable number of tables at runtime. I've built an object which creates an empty dataTable on instantiation, with an AddFeatures method to populate the table later on. This allows me to create 1..n instances of the tables, and populate each table with its constituent features when required.

There is a cut-down version of this at http://www.stephenlead.com/maps/dataTablesTest - once the page has loaded, use the Initialise button to create the 3 empty tables, each of which is added to the page. Now use the Load Results 3 button and note that these results are added to the corresponding table. This is the desired behaviour.

However, I'm finding only the last table to be defined is working - Load Results 1 and 2 do not work. If I comment out line 51 in index.html ("resultsSet3 = new modules.....") then Load Results 2 now works.

Stepping through the code, on line 59 of SelectionSet.js I can see that the correct table is identified as this.resultsTable but for some reason the row isn't being added to the table.

Do you have any suggestions as to why this approach isn't working correctly?

Thanks,
Steve

stevel

PS I just figured out a workaround, which is to instantiate the dataTable within the AddFeatures function, rather than in the construction function.

[code]
addFeatures: function(features) {
if(!this.resultsTable.oTable) {
this.resultsTable.oTable = $('#' + this.resultsTable.id).dataTable({.....
[/code]

Is this the best approach?