Quantcast
Viewing all articles
Browse latest Browse all 82149

Column Filter Server Side Multiple Tables

Hi all,

I have do like in this example : http://jquery-datatables-column-filter.googlecode.com/svn/trunk/issue30.html

But I don't know why, filter work just on my last table.

Code JS:
$('#tabDetail').dataTable({
		"bProcessing": true,
		"bServerSide": true,
		"sPaginationType": "full_numbers",
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [{
				"sExtends": "download",
				"sButtonText": "EXCEL",
				"sUrl": "generer_csv.php"
			},{
				"sExtends": "download",
				"sButtonText": "PDF",
				"sUrl": "generer_pdf.php"
			}, "print"]
		},
		"sAjaxSource": "serverSideDetail.php",
		"fnServerData": function( sUrl, aoData, fnCallback ) {
            $.ajax( {
                "url": sUrl,
                "data": aoData,
                "success": fnCallback,
                "dataType": "json",
                "cache": false
            } );
        }
	}).columnFilter({
		aoColumns: [{ type: "input" },
			{ type: "date-range" },
			{ type: "time-range" , values: ["07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]},
			{ type: "select", values: ['muret', 'labarthe']}]
	});

$('#tabEntrees').dataTable({
		"aaSorting": [[ 4, 'desc' ]],
		"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0, 1, 2, 3, 4 ]}],
		"bProcessing": true,
		"bServerSide": true,
		"sPaginationType": "full_numbers",
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [{
				"sExtends": "download",
				"sButtonText": "EXCEL",
				"sUrl": "generer_csv.php"
			},{
				"sExtends": "download",
				"sButtonText": "PDF",
				"sUrl": "generer_pdf.php"
			}, "print"]
		},
		"sAjaxSource": "serverSideRecurrenceEntrees.php",
		"fnServerData": function( sUrl, aoData, fnCallback ) {
            $.ajax( {
                "url": sUrl,
                "data": aoData,
                "success": fnCallback,
                "dataType": "json",
                "cache": false
            } );
        }
	}).columnFilter({
		aoColumns: [{ type: "input" },
			{ type: "date-range" },
			{ type: "select", values: ['muret', 'labarthe']}]
	});

Code HTML :
<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>
			</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">R&eacute;currence des entr&eacute;es</p>
			<table class="tabStats" id="tabEntrees">
			<thead>
				<tr>			
					<th>Usager</th>
					<th>Derni&egrave;re date d'entr&eacute;e</th>
					<th>D&eacute;ch&egrave;terie</th>
					<th>Commune</th>
					<th>Total</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
			<tfoot>
				<tr>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
			</tfoot>
			</table>
		</div>

Help please, I really don't know where the problem.

Thank

Magali

Viewing all articles
Browse latest Browse all 82149

Trending Articles