How to make DataTables responsive inside jQuery tabs?

joaorodr84

I am trying to put some "DataTables" into jQuery tabs. I want the "DataTables" to be responsive, but it seems that they always overflow out of their tab.

Below is a CodePen with the code of the tabs and tables. I build the table before I call DataTables, so that the "DataTables" tables are responsive.

https://codepen.io/joaorodr84/pen/mPpLoQ

I have made a CodeSnippet to illustrate the problem. Resizing the window should make the tables responsive, but notice that the tables are always overflowing out of their tab.

Here are some examples:

How do I make a column disappear directly when part of that column starts overflowing?

allan

Hi,

A couple of things:

1. Your DataTables and Responsive versions are quite old (1.10.1 and 1.0.0 respectively). 1.10.11 and 2.0.2 are the current release versions)
2. Because the tabs are initialised after the tables the sizes that Responsive has pre-calculated are wrong (since the tab adds extra padding etc, which is why I think you are seeing this issue).

You need to call responsive.recalc() when the DOM is modified.

Updated example: https://codepen.io/anon/pen/XdZXNb

That works for the first tab. For the second tab you need to call the same responsive.recalc() method when the table is shown, since it doesn't have any dimensions when it is initially calculated. Use the show event from the tab library to know when that happens.

I'm looking into ways to make this happen automatically in future.

Allan

joaorodr84

Hi,

I used the most recent releases and this code:

/* Recalculates the size of the resposive DataTable */
function recalculateDataTableResponsiveSize() {
    $($.fn.dataTable.tables(true)).DataTable().responsive.recalc();
}

$('#tabs').tabs({
    activate: recalculateDataTableResponsiveSize,
    create: recalculateDataTableResponsiveSize
});

It works. Thanks a lot. :)