Quantcast
Viewing all articles
Browse latest Browse all 82115

TableTools for multiple tables

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 :
$("#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&eacute;tail des entr&eacute;es</li>
	<li>Statistiques globalis&eacute;es<br /><span class="groupement">groupement par commune</span></li>
	<li>Statistiques globalis&eacute;es<br /><span class="groupement">groupement par heure du jour</span></li>
	<li>Statistiques globalis&eacute;es<br /><span class="groupement">groupement par jour de la semaine</span></li>
	<li>Statistiques globalis&eacute;es<br /><span class="groupement">groupement par mois</span></li>
	<li>Statistiques globalis&eacute;es<br /><span class="groupement">groupement par adh&eacute;rents non identifi&eacute;s</span></li>
</ul>
<div id="contenu">
	<div class="item">			
		<p class="titre">D&eacute;tail des entr&eacute;es</p>
		<table class="tabStats" id="tabDetail">
		<thead>
			<tr>
			<th>Usager</th>
			<th>Date d'entr&eacute;e</th>
			<th>Heure d'entr&eacute;e</th>
			<th>D&eacute;ch&egrave;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&eacute;es, groupement par commune</p>
		<table class="tabStats" id="tabStatsUser'">
		<thead>
			<tr>					
				<th>Usager</th>
				<th>Date d'entr&eacute;e</th>
				<th>Heure d'entr&eacute;e</th>
				<th>D&eacute;ch&egrave;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 !!!

Viewing all articles
Browse latest Browse all 82115

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>