Datatable Responsive Multiple Tables

adrielzxdf

Hi,

I have created a page with multiple Datatable tables, and have implemented the respective responsive files. The first table works responsively, but I have noticed that any tables after that does not. I would like to know if it would be possible to make all the Datatable tables on my page responsive?

allan

Can you link to the page showing the issue please.

Allan

adrielzxdf

Hi,

The site is still in development stage, hence is not accessible online.

Basically, this is how I initialise the responsive Datatable, along with the responsive CSS and JS files.

<table id="openTables" class="table mail-table nowrap" cellspacing="0" width="100%">
    //...
</table>

<table id="closedTables" class="table mail-table nowrap" cellspacing="0" width="100%">
    //...
</table>

$('.table').dataTable( {
    "responsive": true,
    //...
});

I have tried initialising the two tables separately with their ids, but the responsive part only still work on the first table.

allan

Seems to work okay for me: http://live.datatables.net/kaluguxi/1/edit

Allan

adrielzxdf

Thanks for your reply. After seeing your example, I realised that the problem lies in bootstrap.css hiding the datatable as the tables are placed in different tabs. Have not found a solution to post yet, but at least I found out where the problem is. Thanks!

Edit:

.tab-content > .tab-pane {
  display: none;
}

This line was the cause of the problem.

2nd edit:

Problem has been solved since I figured out where it lies. The solution was from a previous discussion, https://datatables.net/forums/discussion/23641/responsive-recalc-undefined
Tabs were hidden, so responsive tables needed to be recalc.