The responsive feature won't work if the data table is hidden when declare

wkkhchan

My data table is initially in a hidden div. The responsive is not working.
The code is like that:

//The class "tab" is declared with "display:none"
<div class="tab"> 
   <table id="pending-table" class="table table-condensed table-striped">
      <thead>
         <tr>
           <th class="cell-id">ID</th>
           <th class="cell-date">Date</th>
           <th class="cell-customer">Customer</th>
           <th class="cell-sales">Sales</th>
           <th class="cell-qty">Qty</th>
           <th class="cell-amount">amount</th>
        </tr>
      </thead>
   </table>
</div>

but If I put the div be visible when the page load initially, the data table can be responsive.

Now I add a class "active" to declare the div with display:block and cancel it after 1 second like that.

  setTimeout(
    function(){$('.view-person').removeClass('active');
    },1000);  

I would like to know any better solution for solve this. Thanks.

s.jacq

Instead of display:none, use visibility: hidden

wkkhchan

In fact, I use display:none and display:block to handle the switch of tab. Therefore, I can't use visibility: hidden on this case.

s.jacq

you can use visibility:visible and visibility: hidden for css instead of the display

wkkhchan

If I use visibility instead of display, the page will contain many space.

s.jacq

That is correct. Then the only solution, is to hide after the table has been initialised.

Instead of using a timeOut, you should set the display:none or removeClass("active") in the "initComplete" event of the dataTable.

wkkhchan

Thank you. but hide the table after init seem not better than use setTimeout on my case. because:

1. setTimeout only fire once.
2. when the user switch the tab to active, I will reload the data from ajax. It will fire the init event. and then the tab will become invisible if set on initComplete

I am a beginner and not sure my concept is true.

s.jacq

You could initialise the table only when the tab is actually shown using the shown.bs.tab event. After all, what's the point in initialising a table which is not visible.

When the tab shown event is fired, check if that's the appropriate tab id and then call the function to initialise the dataTable.

PS: We've all been beginners one day.