If you’d like to tune table created by our Data Table plugin into a tab, which is hidden by default, we need to aware you, that table needs to be rendered on the page from the very beginning to be output correctly, but as a tab is hidden by default, we need to create a detailed tutorial with an example, to make sure everything will be working fine.
Step 1. Add ID of table as an attribute to tab header.
Step 2. Add a small script with a callback on click on your tab headers – right to a page with tabs or into any javascript file of your theme which is loaded on the page with tabs. The callback should:
- get the table id from tab header
- get table object using the function getTableInstanceById(tableId) (this function is placed in global window.supsystic.Tables object)
- call the function fnAdjustColumnSizing(false) of table object to refresh table after showing tab content.
Please note, that it is almost impossible to calculate the positioning and size of the table correctly (and other elements as well) in the hidden elements by default.
Sometimes it causes the issues. For example – you have 100% table width, but in process of building a table, in a hidden element (tab) – its width will be 100% of the width of this hidden element. So, when it’s hidden – its width is 0. Because of this, the table can be display not correct. At that point – when you open the table on the page (in the new tab) – it have to be updated.
The update must be bound to the code of opening tab. Because the code can be different for different tabs on the page – we can not foresee all of them.
An example below shows a code, that would be used for a case, where we have tab container with id “tabsList” and 3 tabs with header with class “tabItem”. Then, our callback will be looking like that:
<ul id="tabsList"> <li><a href="#tabItemContent_1" class="tabItem">Tab 1</a></li> <li><a href="#tabItemContent_2" class="tabItem" data-table_id="1">Tab 2</a></li> <li><a href="#tabItemContent_3" class="tabItem">Tab 3</a></li> </ul> <div id="tabItemContent_1">Some data</div> <div id="tabItemContent_2"></div> <div id="tabItemContent_3">Some data</div> jQuery(document).ready(function() { var tabSection = jQuery('#tabsList'), app = window.supsystic && window.supsystic.Tables ? window.supsystic.Tables : false; // Check are Data Tables by Supsystic plugin API and tabs section exist on page if(tabSection.length && app) { // Find all tabs tabSection.find('.tabItem').each(function() { // Get table id var tableId = jQuery(this).data('table_id'); // Check, is this tab contains table or not if(tableId) { jQuery(this).on('click', function() { var tbl = app.getTableInstanceById(tableId), respMode = tbl.data('responsive-mode'); // Call the function from Data Tables by Supsystic plugin to refresh table after the tab opening if(typeof tbl.fnAdjustColumnSizing == 'function' ) { tbl.fnAdjustColumnSizing(false); } switch(respMode) { case 0: // Responsive Mode: Standart Responsive Mode jQuery(window).trigger('resize'); break; case 1: // Responsive Mode: Automatic Column Hiding tbl.trigger('responsive-resize.dt'); break; default: break; } }); } }); } });
Name Position Office Extn. Start date Salary Airi Satou Accountant Tokyo 5407 Fri 28th Nov 08 $162,700 Angelica Ramos Chief Executive Officer (CEO) London 5797 Fri 9th Oct 09 $1,200,000 Ashton Cox Software Engineer London 2558 Sat 13th Oct 12 $132,000 Bradley Greer Integration Specialist New York 4804 Sun 2nd Dec 12 $372,000 Bruno Nash Software Engineer London 6222 Tue 3rd May 11 $163,500 Caesar Vance Pre-Sales Support New York 8330 Mon 12th Dec 11 $106,450 Cedric Kelly Senior Javascript Developer Edinburgh 6224 Thu 29th Mar 12 $433,060 Charde Marshall Regional Director San Francisco 6741 Thu 16th Oct 08 $470,600 Dai Rios Personnel Lead Edinburgh 2290 Wed 26th Sep 12 $217,500 Doris Wilder Sales Assistant Sidney 3023 Mon 20th Sep 10 $85,600 Finn Camacho Support Engineer San Francisco 2927 Tue 7th Jul 09 $87,500 Garrett Winters Accountant Tokyo 8422 Mon 25th Jul 11 $170,750 Gavin Cortez Team Leader San Francisco 2860 Sun 26th Oct 08 $235,500 Haley Kennedy Senior Marketing Designer London 3597 Tue 18th Dec 12 $313,500 Herrod Chandler Sales Assistant San Francisco 9608 Mon 6th Aug 12 $137,500 Jackson Bradshaw Director New York 1042 Fri 26th Sep 08 $645,750 Jennifer Acosta Junior Javascript Developer Edinburgh 3431 Fri 1st Feb 13 $75,650 Lael Greer Systems Administrator London 6733 Fri 27th Feb 09 $103,500 Michael Bruce Javascript Developer Singapore 5384 Mon 27th Jun 11 $183,000 Michelle House Integration Specialist Sidney 2769 Thu 2nd Jun 11 $95,400 Olivia Liang Support Engineer Singapore 2120 Thu 3rd Feb 11 $234,500 Prescott Bartlett Technical Author London 3606 Sat 7th May 11 $145,000 Quinn Flynn Support Lead Edinburgh 9497 Sun 3rd Mar 13 $342,000 Rhona Davidson Integration Specialist Tokyo 6200 Thu 14th Oct 10 $327,900 Serge Baldwin Data Coordinator Singapore 8352 Mon 9th Apr 12 $138,575 Shou Itou Regional Marketing Tokyo 8899 Sun 14th Aug 11 $163,000 Suki Burks Developer London 6832 Thu 22nd Oct 09 $114,500 Tatyana Fitzpatrick Regional Director London 1965 Wed 17th Mar 10 $115,000 Thor Walton Developer New York 8327 Sun 11th Aug 13 $115,000 Timothy Mooney Office Manager London 7580 Thu 11th Dec 08 $115,000 Unity Butler Marketing Designer San Francisco 5384 Wed 9th Dec 09 $115,000 Vivian Harrell Financial Controller San Francisco 9422 Sat 14th Feb 09 $115,000 Zenaida Frank Software Engineer New York 7439 Mon 4th Jan 10 $115,000 Zorita Serrano Software Engineer San Francisco 4389 Fri 1st Jun 12 $115,000 Name Position Office Extn. Start date Salary