3 responsive tables in 3 jQuery Tabs

MelodyNelson

Link to test case: https://live.datatables.net/qelelegu/5/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

In the test case below, if you resize the output page for a smaller width, you'll see that the tables in the others tabs won't be resized. If you change tab and resize again, only the visible DT is resized correctly and don't « go outside » the width limit of the tab.

https://live.datatables.net/qelelegu/5/edit

On my website, I'm using this code on one table because I add to adjust the columns of totals rowgrouping.

initComplete: function () {
            debounceDraw( this.api() );
        }

// timer (en millisecondes) pour recalculer le tableau après redimensionnement (nécessite underscore.js)
    function debounceDraw(table) {
        var drawDebouncedFn = _.debounce(function() {
            console.log('resize');
            table.draw();
        }, 500);
        table.on('responsive-resize', drawDebouncedFn);
    }

@kthorngren already helped me with this code ^^
https://datatables.net/forums/discussion/78718/problem-with-orderfixed-on-a-complex-dt-row-group-responsive-etc

Should I add the debounceDraw on something else that initiComplete for each DT inside the tabs ?

Thanks

allan

You need to call columns.adjust() when the tab is changed. See this example. Looks like you are using jQuery UI so you'd make that method call whenever their activate event is triggered.

Allan

MelodyNelson

Thank you Allan

I've updated the test case, I tried something to adjust the searchPanes sizes but I failed. Example on the second tab if you go back to another tab, change the window size, the width of the panes won't be uptaded.

https://live.datatables.net/qelelegu/7/edit?html,js,console,output

MelodyNelson

Oops, I found my mistake (I didn't put the right var name for the table)

The update : https://live.datatables.net/qelelegu/8/edit

If I have searchPanes for each table, could I write a more generic code instead of the same 2 lines for each table ?

allan

Yes:

DataTable.tables({ visible: true, api: true }).tables().every(function () {
  this.columns.adjust();
  
  if (this.searchPanes.container()) {
    this.searchPanes.container().prependTo(this.container());
    this.searchPanes.resizePanes();
  }
});

https://live.datatables.net/qelelegu/9/edit

Allan

MelodyNelson

That's great ! Thanks a lot Allan