Server side and column filter
Server side and column filter
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 :
[code]
$('#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]
Code HTML :
[code]
Filtres sur tableau
Usager
Date d'entrée
Heure d'entrée
Déchèterie
Usager
Date d'entrée
Heure d'entrée
Déchèterie
Commune
Statut
[/code]
Thanks for your help
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 :
[code]
$('#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]
Code HTML :
[code]
Filtres sur tableau
Usager
Date d'entrée
Heure d'entrée
Déchèterie
Usager
Date d'entrée
Heure d'entrée
Déchèterie
Commune
Statut
[/code]
Thanks for your help
This discussion has been closed.
Replies
Allan
Thank you for your response.
I can filtering my datas by input and select
[code]
$('#tabDetail').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "serverSide_general.php",
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "json",
"cache": false
} );
}
}).columnFilter({aoColumns:[
{ type:"input" },
{ type:"input" },
{ type:"input" },
{ type:"select", values: ["val1", "val2"] }
]});
[/code]
How can i filtering data by a date-range ?
[quote]columnFilter({aoColumns:[
{ type:"input" },
{ type:"date-range" },
{ type:"input" },
{ type:"select", values: ["val1", "val2"] }
]});[/quote]
Thanks for your help
Magali
I can filtering my data by input and select that I have add before table
I have two input : minDate and maxDate for my date range.
Whan I change just one input, that's work, but when I put two values (so in min and max date), I don't have filtering data by the max date but just by the min date.
Help ?
Code JS :
[code]
var oTable = $('#tabDetail').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "serverSide_general.php",
"fnServerData": function( sUrl, aoData, fnCallback ) {
aoData.push( { "name": "minDate", "value": $('#minDate').val() } );
aoData.push( { "name": "maxDate", "value": $('#maxDate').val() } );
$.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "json",
"cache": false
});
}
});
$('#minDate').change( function () { oTable.fnFilter( $(this).val(), 0 );} );
$('#maxDate').change( function () { oTable.fnFilter( $(this).val(), 0 );} );
[/code]
How can I have two filters, in the same time, or more with this configuration ?
Cause just my first filter is working, however my .php wait two filters.
Please help
Magali
Allan
It's fine, now I cand filtering with input, select and date-range in server side !!!
For thoose who want do it too.
1. Modify jquery.dataTables.columnFilter.js at line 651 :
[code]
for (j = 0; j < aiCustomSearch_Indexes.length; j++) {
var index = aiCustomSearch_Indexes[j];
var fnSearch_ = function (fieldIndex) {
return $("#" + oTable.attr("id") + "_range_from_" + fieldIndex).val() + properties.sRangeSeparator + $("#" + oTable.attr("id") + "_range_to_" + fieldIndex).val();
}
afnSearch_.push(fnSearch_);
}
[/code]
And line 670 :
[code]
for (k = 0; k < aoData.length; k++) {
if (aoData[k].name == "sSearch_" + index) aoData[k].value = afnSearch_[j](index);
}
[/code]
After, in server_processing.php replace last /* Individual column filtering */ by :
[code]
/* Individual column filtering */
for ( $i=0 ; $i