Jquery Datatable responsive plugin inside bootstrap 3 collapsed panel

Question

I found a problem when putting a Jquery Datatable (with its own responsive plugin) in a bootstrap 3 collapsed panel.

Here is the example that works: http://jsfiddle.net/Wc4xt/1804/

Here is the example that does NOT work: http://jsfiddle.net/Wc4xt/1803/

The problem I found is that,

• if the panel that wraps the table is collapsed at the beginning, ie setting the wrapper div like this: <div id="collapseOne" class="panel-collapse collapse"> , the table's columns will not collapse when I resize the browser.

• if the panel that wraps the table is collapsed at the beginning, ie if I either remove "collapse" away from the class, ie <div id="collapseOne" class="panel-collapse"> , or add "in" into its class, ie <div id="collapseOne" class="panel-collapse collapse in"> , then the table works fine. The columns are able to collapse when window resizes.

However, I want the collapsed panel stay closed by default. So I have to add "collapse" to the class without class "in".

I also check the bootstrap source code,

.collapse {
  display: none;
}
.collapse.in {
  display: block;
}

I have spent days in this and still cannot see why the class "collapse" will cause this problem.

Thank you all in advance.

Answer 1

I was just working on the same thing: Bootstrap collapse items combined with Jquery dataTables. When the collapse item is closed, the dataTable does not show correctly after opening the collapse item. It's possible to adjust the table after the collapse item is opened, this will display the table as it should:

$('.panel-collapse').on('shown.bs.collapse', function (e) {
  $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
});

Here is a JSFiddle of a working example: http://jsfiddle.net/buncjzLp/1/

Sources:
Responsive Issues With Multiple DataTables And Bootstrap Tabs https://www.datatables.net/forums/discussion/28234/responsive-issues-with-multiple-tables-and-bootstrap-tabs

Answer 2

I figured out a workaround to resolve my problem. Programmatically hide the panel after the page is loaded.