tables in different JQUERY tabs

protome

Hello,
I have a page with 3 tabs, each with a datatable in them. When I first load the page, I make 3 ajax calls, and the tables are filled.
I have until now been using my own classes to define the width of the columns, and decided to use the "columns" option of datatable.
My problem now is that only the first table is correctly sized, the others not. When the user updates data in one of the tables , I reload that specific table : it now shows correctly, columns are correctly resized.
Is there any way I can trick the non-active tabs on first load to correctly size the columns on page load ?
Thanks a lot

protome

I have found some beginning of answer. I understand I must do something when the user click on the tab, and I found this:
$('[data-uk-tab]').on( 'change.uk.tab', function (e,area) {
console.log("clicked="+area.context.id); // correct I get the new tab
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
console.log($.fn.dataTable.tables(true)) // ?????? I get the previous tab table name ????
} );

Of course it doesn't work, so I put the console.log: the first does print the new tab name, the second the previous tab table name
I thought I would see the table name of the new tab, so that it could do the resize now that the tab is active.
Any idea of what I should look at to find the error ? is that an error ? or am i understanding everything wrong ? if so, can somebody kindly point to the doc that I am missing ?
Thanks a lot

allan

Use columns.adjust() to adjust the column sizing when you make the table visible. This is how you do it with Bootstrap tabs. You just need to update it to use jQuery UI's events.

Allan

protome

Thanks Allan, I am using getuikit, and I did:
$('[data-uk-tab]').on( 'change.uk.tab', function (e,area) {
console.log("clicked="+area.context.id);
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
The console.log is to make sure I am on the correct tab, which I am. My table is all shrinked, all columns the same size , exactly as in :
https://www.datatables.net/forums/discussion/26041/table-width-not-correctly-rendered-on-non-active-bootstrap-tabs
and I see the same behaviour as the JSFIDLE that is linked.
If edit the table (call a modal, do something, save and reload the table in that tab) then the table shows perfect as it should.
The way I am working is: create the table headers, do an ajax call, fill the table body, and then call the DataTable on the table with the options.
I have tried also giving the name of the table when changing the tabs, but nothing changes
$('[data-uk-tab]').on( 'change.uk.tab', function (e,area) {
$("#machinesList").dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
I admit I don't understand - Thanks for your help and advice

protome

This is getting weirder and weirder. I must have something really wrong in my code or strange going on:
I have 4 tabs, my "faulty table - in fact the only one with the columns option" is in tab 3.
I load the page.
Tab 1 Ok, tab2 ok, tab 3 not ok, tab4 ok, again tab 3 : OK
if I try to print the name of the table in the current tab
console.log($.fn.dataTable.tables(true))
it prints the name of the table in the previous tab !

What can I be doing wrong ? what should I check ?
Thanks for all tips and advice !

allan

$("#machinesList").dataTable.tables( {visible: true, api: true} ).

That is wrong. You want to use the static $.fn.dataTable.tables method like in the Bootstrap example I linked to above:

$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();

Does change.uk.tab trigger after the table has changed?

Allan

protome

Thanks Allan
I managed to create a very simple JSFIDDLE ,
https://jsfiddle.net/prtome/1g0xhkdq/9/

it reproduces my problem.
I am afraid I don't understand your question about the change.uk.tab
but as you can see, I print the correct tab, but the table name of the previous tab..

protome

I updated my fiddle, i have been told how to find the "uk-table" on the page
https://jsfiddle.net/prtome/1g0xhkdq/13/

so- the printed uk-table is correct, the dataTable is not.
Why is it that it sees the previous tab table ? any way I can pass it the correct table ?
Thanks

allan

It seems like a UIKit issue to me. If you add: console.log( $('#tableB:visible').length ); which will get the visible number of elements matched (in this case #tableB) and then click into the second tab, it shows 0: https://jsfiddle.net/1g0xhkdq/15/

This suggests that the change event occurs before the table is made visible.

It looks like UIKit only offers the change event, so you would have to use a setTimeout() to allow it to wait until the table is shown. Having a changed event (which is similar to what Bootstrap does) would be the best solution.

Also you need to add width="100%" to your DataTables.

Updated and working example: https://jsfiddle.net/1g0xhkdq/16/ .

Allan

protome

Thanks. Indeed it seems a uikit behavior. I go and ask there if there is a plan for a changed event,
Thanks again for your help and advices