Hello,
I know that lot of people had the same problem than me, and some comments had been post.
But, I don't find the solution in my case.
I have multiple tables in the same page, but there are in tabs.
The tab open by default work with TableTools, but in the others tab, just print function is working.
Code JS for DataTables :
Code JS for tabs :
Code CSS for tab :
Code HTML :
Thanks a lot for you help !!!
I know that lot of people had the same problem than me, and some comments had been post.
But, I don't find the solution in my case.
I have multiple tables in the same page, but there are in tabs.
The tab open by default work with TableTools, but in the others tab, just print function is working.
Code JS for DataTables :
$("#contenu").tabs({ "show": function(event, ui){ var jqTable = $('table.tabStats', ui.panel); if (jqTable.length > 0 ){ var oTableTools = TableTools.fnGetInstance(jqTable[0]); if (oTableTools != null && oTableTools.fnResizeRequired()){ jqTable.dataTable().fnAdjustColumnSizing(); oTableTools.fnResizeButtons(); } } } }); var oTableDetail = $('#tabDetail').dataTable({"sDom": '<"H"Tfr>t<"F"ip>'}); var oTableStatsUser = $('#tabStatsUser').dataTable({"sDom": '<"H"Tfr>t<"F"ip>'});
Code JS for tabs :
$(function() { $('#onglets').css('display', 'block'); $('#onglets').click(function(event) { var actuel = event.target; if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) { alert(actuel.nodeName) return; } $(actuel).addClass('actif').siblings().removeClass('actif'); setDisplay(); }); function setDisplay() { var modeAffichage; $('#onglets li').each(function(rang) { modeAffichage = $(this).hasClass('actif') ? '' : 'none'; if($(this).hasClass('actif')) $('.tabStats').eq(rang).removeClass('display'); else $('.tabStats').eq(rang).addClass('display'); $('.item').eq(rang).css('display', modeAffichage); }); } setDisplay(); });
Code CSS for tab :
#onglets{ display: none; } #onglets li{ position: relative; float: left; list-style: none; padding: 2px 5px 7px; margin-right: 5px; border: 1px solid #1175AE; cursor: pointer; background-color: #EEEEEE; color: #0D5995; z-index: 1; } #onglets .actif{ border-bottom: none; font-weight: bold; z-index: 10; } #contenu{ clear: both; position: relative; margin: 0 20px; padding: 10px; border: 5px solid #0D5995; z-index: 5; top: -6px; background-color: #EEEEEE; color: #0F67A1; width: 1020px; overflow: hidden; border-radius: 15px; } .display{ display: none; }
Code HTML :
<ul id="onglets"> <li class="actif">Détail des entrées</li> <li>Statistiques globalisées<br /><span class="groupement">groupement par commune</span></li> <li>Statistiques globalisées<br /><span class="groupement">groupement par heure du jour</span></li> <li>Statistiques globalisées<br /><span class="groupement">groupement par jour de la semaine</span></li> <li>Statistiques globalisées<br /><span class="groupement">groupement par mois</span></li> <li>Statistiques globalisées<br /><span class="groupement">groupement par adhérents non identifiés</span></li> </ul> <div id="contenu"> <div class="item"> <p class="titre">Détail des entrées</p> <table class="tabStats" id="tabDetail"> <thead> <tr> <th>Usager</th> <th>Date d'entrée</th> <th>Heure d'entrée</th> <th>Déchèterie</th> <th>Commune</th> <th>Statut</th> </tr> </thead> <tbody> ALL MY DATA </tbody> <tfoot> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </tfoot> </table> </div> <div class="item"> <p class="titre">Statistiques globalisées, groupement par commune</p> <table class="tabStats" id="tabStatsUser'"> <thead> <tr> <th>Usager</th> <th>Date d'entrée</th> <th>Heure d'entrée</th> <th>Déchèterie</th> <th>Commune</th> <th>Statut</th> </tr> </thead> <tbody> ALL MY DATA </tbody> <tfoot> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </tfoot> </table> </div> </div>
Thanks a lot for you help !!!