CODEWITHSUNDEEP
javascriptjquerydatatable
SBB
SBB

Reputation: 8970

Datatables destroy issue

I am having trouble getting a datatable to destroy correctly when needed.

Here is what my page currently looks like.

This table has a datatable which is working correctly as needed.

When you select accounts on here and move to the overview tab, it will show all of the accounts you selected in another datatable.

enter image description here

The datatable here works correctly the first time when i generated it using this code:

             oTable1 = $('#overviewAccounts').dataTable({
                "bFilter": false,
                "bInfo": true,
                "bLengthChange": false,
                "bSort": false,
                "sPaginationType": "bootstrap",
                "iDisplayLength": 10
            });

However, if I go back to the first tab, change the accounts I want and then go back to the overview, it throws an error about unable to recreate table.

I tried using both bDestroy and bRetrieve and the same thing happens with both.

What would you recommend to be able to re-create this datatable each time I click on the overview tab with the most current data ?

Upvotes: 1

Views: 3735

Answers (1)

CIRCLE
CIRCLE

Reputation: 4879

I would do it this way.
1- Set your table with data tables inside a function and call it:

function setTable(){
$('#overviewAccounts').dataTable({
                "bFilter": false,
                "bInfo": true,
                "bLengthChange": false,
                "bSort": false,
                "sPaginationType": "bootstrap",
                "iDisplayLength": 10
});
}
setTable();

Then, after your action use:

$('.overview').on('click', function(){
    $('#overviewAccounts').dataTable().fnDestroy(); // Destroy DataTables from current table
    setTable(); // Restore DataTables in current table
});

Upvotes: 2

Related Questions