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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<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">[supsystic-tables id=1]</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; } }); } }); } }); |