3 Datatables in 3 tabs print button works only once

dariov

Hello Guys i'm struggling with this issue:

i have 3 datatables inside a bootstrap card divided in 3 tabs. When the user switches to another tab a function checks which tab is active and replaces the print button with the one that corresponds to the active datatable using

`
$('#tableButtons').empty();

        switch (triggerEl.id) {
            case 'pills-transactions-tab':
                transactionsTable.buttons().container().appendTo('#tableButtons');
                break;

            case 'pills-incomes-tab':
                incomesTable.buttons().container().appendTo('#tableButtons');
                break;

            case 'pills-outflows-tab':
                outflowsTable.buttons().container().appendTo('#tableButtons');
                break;
        }

`

this works fine when i move from tab 1 to tab 2 and from tab 2 to tab 3. If i stay on the page and go back to tab 2 or tab 1 it doesn't work anymore. I made a demo to reproduce the issue.

http://live.datatables.net/tofaguna/1/edit?html,js,output

one solution could be to use one div for each datatable buttons and hide/show them but i don't like it.

kthorngren

Thanks for the test case. You only want to instantiate the buttons once for each table. One option is to create a div for each button. Hide the 2nd and 3rd. Instantiate each table's buttons to their own div. Then show and hide the div elements instead of creating new buttons. Something like this:
http://live.datatables.net/tofaguna/2/edit

Kevin