Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82117

Server side and column filter

$
0
0
Hi all,

I use Datatable with server side processing.
I want to filtering my datas with columnFilter but I don't know how do it.

Code JS :
$('#tabDetail').dataTable({
	"bProcessing": true,
	"bServerSide": true,
	"sAjaxSource": "server_processing.php",
	"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
		oSettings.jqXHR = $.ajax( {
			"dataType": 'json',
			"type": "POST",
			"url": sSource,
			"data": aoData,
			"success": fnCallback
		});    
	}
	}).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&eacute;e</td>
			<td align="center" id="dateFilter"></td>
		</tr>
		<tr id="filter_col2">
			<td align="center">Heure d'entr&eacute;e</td>
			<td align="center" id="heureFilter"></td>
		</tr>
		<tr id="filter_col3">
			<td align="center">D&eacute;ch&egrave;terie</td>
			<td align="center" id="decheterieFilter"></td>
		</tr>
	</tbody>
</table>	
<br />
<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>
	</tbody>
	<tfoot>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</tfoot>
</table>

Thanks for your help

Viewing all articles
Browse latest Browse all 82117

Trending Articles



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