datatables w/ tabs

acemory

Hi, I am working on a project where I need datatables in tabs (can be viewed here: https://temp-rnaseq-hosting.s3.amazonaws.com/get-summary/index.html.

The problem is that the datatables in the tabs that are not active on page load has misaligned column headers. They fix themselves if I click on one of the sorting arrows. But I need them to present correctly when someone clicks on one of the tabs, not just when you use a sort function or w.e.

Does anyone have any suggestions how to address this? Thanks!
-Andrew

colin

Hi @acemory ,

I suspect you need to call columns.adjust() when that tab is clicked - there's probably an event you can use to trigger it.

Cheers,

Colin

acemory

Thanks Colin, I will try this and post results here one way or another.

acemory

colin, I am so far unable to get it to work. Maybe I am not using the API correctly?

I just have an in line onClick that passes the ID of the relevant data table to the following function:

    function adjustColumns(id){
      var table = $(id).DataTable();
      table.columns.adjust().draw();

      console.log("HAPPENS")
    }

Happens gets printed but the function does not fix the presentation.

acemory

The method clearly works. If I resize the window it draws the header columns correctly. It just looks like I am not calling it correctly?

I double checked the ID, it is correct.

kthorngren

Are you calling the function after switching to the new tab?

not sure if you are using Bootstrap but here is an example:
https://datatables.net/examples/api/tabs_and_scrolling.html

Kevin

acemory

I think that I am calling it correctly, it just doesn't appear to be the answer.

acemory

@kthorngren Thanks so much! That JS fixed it. I think others have said the correct solution and I was just not using it correctly.

kthorngren

To be clear, it is only the column headers that are screwed up.

I see. I just looked at your example. It looks like the problem might be that you are using Bootstrap 4 but have not installed the Datatables Bootstrap integration file. You can read about this in the Style docs. Here is an example:
https://datatables.net/examples/styling/bootstrap4.html

Notice the use of dataTables.bootstrap4.min.js and dataTables.bootstrap4.min.css (found in the CSS tab).

The easiest way to get the proper files is to use the Download Builder.

Kevin