Hi everybody.
I use Column Filter in an external form (like this example : http://jquery-datatables-column-filter.googlecode.com/svn/trunk/external.html). I have multiple tables on the same page, with the same name in columns, but with a different row grouping (group by name, group by day, etc).
My external form filter work on the first table only for the moment, but i want filtering all tables with just one filter.
How can I do it ?
Code js :
Code Html :
Someone can help me please ?
I use Column Filter in an external form (like this example : http://jquery-datatables-column-filter.googlecode.com/svn/trunk/external.html). I have multiple tables on the same page, with the same name in columns, but with a different row grouping (group by name, group by day, etc).
My external form filter work on the first table only for the moment, but i want filtering all tables with just one filter.
How can I do it ?
Code js :
$(document).ready(function (){
var oTableDetail = $('#tabDetail').dataTable();
var oTableStatsUser = $('#tabStatsUser').dataTable();
$("#tabDetail").dataTable().columnFilter({aoColumns:[
{ type:"input", sSelector: "#usagerFilter" },
{ type: "date-range", sSelector: "#dateFilter" },
{ type:"select", sSelector: "#heureFilter" },
{ type:"select", sSelector: "#decheterieFilter" }
]}
Code Html :
<table class="tabStatsFiltre" id="tabFilter">
<thead>
<tr><th colspan="2">Filtres sur tableau</th></tr>
</thead>
<tbody>
<tr id="filter_global">
<td align="center">Usager</td>
<td align="center" id="usagerFilter"></td>
</tr>
<tr id="filter_col1">
<td align="center">Date d'entrée</td>
<td align="center" id="dateFilter"></td>
</tr>
<tr id="filter_col2">
<td align="center">Heure d'entrée</td>
<td align="center" id="heureFilter"></td>
</tr>
<tr id="filter_col4">
<td align="center">Déchèterie</td>
<td align="center" id="decheterieFilter"></td>
</tr>
</tbody>
</table>
<br />
<div id="contenu">
<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>
<br />
<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>
Someone can help me please ?