Multiple instances not working

Paykoman

Link to test case: You can add me on discord and il show it on my workspace "paykomanvll"

Debugger code (debug.datatables.net): I tryed to use but will not work i copyed the debug source in my JS file but it says undefined if i want to start the debugger + cant copy paste your script CSP blocking this url

Description of problem:
I have two buttons, each button load a table.

Table A
Table B

If i click Table A it will be loaded and working fine.
If i click Table B same.
If i go back to Table A then this Table is broken andy works anymore.
But i can go back to Table B this is still working

Yes the Tables elements will be moved in dom betwen visible and non visible containers.
But that cant be the problem then both tables should not work if i re enter.
Only the table if i load as first is broken if i re enter this. If i load B as first then this is broken and A is still working -,-

Here my code:

that.chartTable = new DataTable('#memberChart', {
    fixedHeader: true,
    fixedColumns: true,
    scrollX: '100%',
    scrollY: '500px',
    scrollCollapse: true,
    bPaginate: false, //hide pagination
    bInfo: false, // hide showing entries
    order: [[2, 'desc']],
    columnDefs: [{targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], orderSequence: ["desc", "asc"] }]
});

that.chartTable = new DataTable('#memberChart', {
    fixedHeader: true,
    fixedColumns: true,
    scrollX: '100%',
    scrollY: '500px',
    scrollCollapse: true,
    bPaginate: false, //hide pagination
    bInfo: false, // hide showing entries
    order: [[2, 'desc']],
    columnDefs: [{targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], orderSequence: ["desc", "asc"] }]
});

Each table will just created one time i have a IF who check it

if( $('#memberChartSec').length == 0 ){
    // Append container and at least create table with new DataTable();
}else{
    $('#memberChartSec').appendTo('#editorContent');
}

I hope any can help, i preffer Dsicord: "paykomanvll"

allan

As far as I can see the code for the two tables is identical? Even the ID is the same, which is not valid HTML. An id must be unique.

I'd really need a link to a test case showing the issue so I can diagnose and help to resolve the problem.

Allan

Paykoman

Ach damn no is not the same i really used a few time to copythe code here but it seems anything i did fron on copy paste -,-

You can see the variable if i save the instance is different roo

that.memberTable = new DataTable('#memberlist', {
    fixedHeader: true,
    fixedColumns: true,
    scrollX: '100%',
    scrollY: '500px',
    scrollCollapse: true,
    bPaginate: false, //hide pagination
    bInfo: false, // hide showing entries
    order: [[1, 'desc']], // initzial order on table are loaded
});

Did you have have discord? i can show by screenshare etc. im not really use these platforms for showcase etc. its so complicated today

kthorngren

Only the table if i load as first is broken if i re enter this. If i load B as first then this is broken and A is still working -,-

How is it broken - please provide more details.

Do you get errors in the browser's console?

Maybe you can build a test case showing the issue with one of the sites listed here:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Paykoman

No errors in console, then i would fix it self

The table is broken like i cant click the headers to filter, the table is dead...
But only the table who is loaded as first is not always the same.
If the second table created the first one is dead.

And i can not build a test case then its implemented in my tab switching system, i execute a xhr before table are created a taste case will not work.
The tables will be moved between containers etc.

Best option is to see the real implementation.

That is why i ask for Discord, mabye Skype or any other software if i can screenshare then i can show exactly what i mean.

kthorngren

I can't do any of the screenshare stuff but maybe Allan will. You can contact him directly by clicking his name in this thread to find out if he is willing.

I doesn't sound like the problem is specific to your data. One option to provide a test case might be to use the Ajax URLs provided in one of these JS Bin templates templates to simulate your XHR request. Then implement your tab system. Possibly you can work on building a test case while waiting for Allan's response.

The table is broken like i cant click the headers to filter, the table is dead...

Sorting and searching don't work either?

Sounds like you might be calling destroy() on the first loaded table to remove the Datatables features?

Kevin

Paykoman

okay then i will wait.

I have tryed to resize the browser it seems any event will then be fired to revive the table :-(

Its so strange.

kthorngren

I have tryed to resize the browser it seems any event will then be fired to revive the table :-(

Hmm, that is strange. Is it just the header search that doesn't work or are the other features like sorting and paging not working?

Possibly you need to use columns.adjust() when the tab is displayed, like this example.

Kevin

allan

I can do live one-to-one support under the maintenance and support contracts. However, if you are looking for free support, I'm happy to help, but you need to make it possible for me to support you - typically that is through a link to a test case showing the issue.

Allan

Paykoman

its just the ordering (up and down) function who is not working.
After i entered a name on searchfield the headers revive and working now uhmpf -,-

can is use any revive/restore function on datatables?

i solved it by adding a adjust();

Every table will be execute it when the table will be reopened...

this.allyMember = function(){
    if( $('#memberListSec').length == 0 ){
        // Append container and at least create table with new DataTable();
    }else{
        // table exist already move to visible container and make sure its working
        $('#memberListSec').appendTo('#editorContent');
        that.memberTable.columns.adjust().draw(); // need to bugfix
    }
};
this.allyChart = function(){
    if( $('#memberChartSec').length == 0 ){
        // Append container and at least create table with new DataTable();
    }else{
        // table exist already move to visible container and make sure its working
        $('#memberChartSec').appendTo('#editorContent');
        that.chartTable.columns.adjust().draw(); // need to bugfix
    }
};