Column Headers move to left when using tabs and ScrollX

MadBoyEvo

Link to test case:
- Works -> https://codepen.io/MadBoyEvo/pen/dyOoQLY
- Doesn't work -> https://codepen.io/MadBoyEvo/pen/zYoGeow

The code is basically the same with the difference that one uses ScrollX, the other one is using responsive.

I use this function to resize responsive on tab switch

        function resizeTable(table) {
                    if ($.fn.DataTable.isDataTable("#" + table.id)) {
                        $("#" + table.id).DataTable().columns.adjust().responsive.recalc();
                    }
                }

Of course it doesn't work on scrollx and it basically errors out on if ($.fn.DataTable.isDataTable("#" + table.id)) {. But whether it errors out or if I remove the code the headers on "next tab" move to the left from center position.

1. Is there something similar to recalc but for ScrollX? Or how I could deal with this situation?
2. How can I detect it's responsive vs scroll x is used?

kthorngren

When your resizeTable() function is called there are two tables, the first doesn't have an id which is causing this error:

Uncaught Error: Syntax error, unrecognized expression: #

Here is the output if you add a console.log(table.id);` statement:

table id: 
<table width=​"100%" class=​"dataTables display compact dataTable no-footer" role=​"grid" style=​"margin-left:​ 0px;​ width:​ 1151px;​">​…​</table>​

table id: DT-FTykmyRX
<table width=​"100%" id=​"DT-FTykmyRX" class=​"dataTables display compact dataTable no-footer" role=​"grid" aria-describedby=​"DT-FTykmyRX_info" style=​"width:​ 100%;​">​…​</table>​

Is there something similar to recalc but for ScrollX? Or how I could deal with this situation?

Use columns.adjust().

How can I detect it's responsive vs scroll x is used?

I don't believe there are any API's etc for this. You could dig directly into the settings but this is not recommended as they may change. I would just use a try/catch statement. I changed your example to look like this and it seems to work:

                function resizeTable(table) {
                  console.log('table id:', table.id);
                     if (table.id && $.fn.DataTable.isDataTable("#" + table.id)) {
                    console.log(table);
                  try {
                    $("#" + table.id).DataTable().columns.adjust().responsive.recalc();
                  }
                  catch { 
                    $("#" + table.id).DataTable().columns.adjust();
                  }
                 }

                }

Unfortunately I don't have a way to save the changes.

Kevin

MadBoyEvo

Thank you. Seems to work. I've not noticed that for some reason I find all tables on the page, rather the ones on tab only.

  findObjectsToRedraw(tab.id + "-Content");

 var table = document.getElementById(id).querySelectorAll('table.dataTables');

So it seems the document.getElementByid(tab.id + "-content").QuerySelector gives me more than what I wanted...

MadBoyEvo

It's weird, because it passes table two times only when scrollX is used. it doesn't happen when it's responsive. Any idea why would that happen?

kthorngren

The scrollX, and some other options/extension, clones the header. If you inspect the HTML you will see two tables. See the last comment from Allan in this thread.

Kevin

MadBoyEvo

Thank you! Really appreciate your insight!