tables in different JQUERY tabs

tables in different JQUERY tabs

protomeprotome Posts: 25Questions: 11Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • protomeprotome Posts: 25Questions: 11Answers: 1

    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

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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

  • protomeprotome Posts: 25Questions: 11Answers: 1

    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

  • protomeprotome Posts: 25Questions: 11Answers: 1

    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 !

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    $("#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

  • protomeprotome Posts: 25Questions: 11Answers: 1

    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..

  • protomeprotome Posts: 25Questions: 11Answers: 1

    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

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓

    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

  • protomeprotome Posts: 25Questions: 11Answers: 1

    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

This discussion has been closed.