Malek Ben el ouafi Malek Ben el ouafi - 1 month ago 24
jQuery Question

datatable filter with mRender

i use datatable plugin to display a list of item using ajax, and i get a problem in filtring data in only one column of the table ( statut )
this column is costumised by mRender

this is my code

oTable2 = $('#sample_2').dataTable({
"sAjaxSource": myScript.pluginsUrl+'/reclamation/ajax/get_reclamations_table_Admin.php',
"aoColumns": [
{
"mData": null,
"bSortable": false,
"sClass":'text-center',
"mRender": function(data, type, full) {
if(file_exists(myScript.pluginsUrl+'/reclamation/images/uploads/thumbnails/'+full.image) && full.logo !=""){
return '<a class="example-image-link" data-lightbox="example-'+full.id+'" href="'+myScript.pluginsUrl+'/reclamation/images/uploads/'+full.image+'" data-toggle="lightbox" ><img class="example-image w-h-70" src="'+myScript.pluginsUrl+'/reclamation/images/uploads/thumbnails/'+full.image+'" ></a>';
}else{
return '<img src="'+myScript.pluginsUrl+'/reclamation/images/no_image.png" class="w-h-70" >';
}

}
},
{ "mData": "titre" },
{ "mData": "nom" },
{ "mData": "prenom" },
{ "mData": "email" },
{
"mData": null,
"bfilter": true,
"mRender": function(data, type, full) {
if(full.statut==0){
var t="selected";
var icon = ' <i class="icon-eye-close" style="margin-right: 5px; margin-left: -5px;font-size:16px; color: #f94545;"></i>';
}else if(full.statut==1){
var tt="selected";
var icon = '<i class="icon-bullhorn" style="margin-right: 5px; margin-left: -5px;font-size:16px; color: #3688ee;"></i>';
}else if(full.statut==2){
var ttt="selected";
var icon = '<i class="icon-time" style="margin-right: 5px; margin-left: -5px;font-size:16px; color: #eea236;"></i>';
}else{
var tttt="selected";
var icon = '<i class="icon-ok-sign" style="margin-right: 5px; margin-left: -5px; font-size:16px; color: #39ee36;"></i>';
}


return icon+'<select onchange="getval(this,'+full.id+');"><option value="0" '+t+'>N\'est pas confirmer</option><option value="1" '+tt+'>En vote</option><option value="2" '+ttt+'>À l\'attente de solution</option><option value="3" '+tttt+'>Résolue</option></select>';

// if(full.statut ==0){
// return '<span class="label label-sm label-success">Confirmer</span>'
// }else{
// return '<span class="label label-sm label-danger">N\'est pas confirmer</span>'
// }
}
},
{ "mData": "date_create" },
{
"mData": null,
"bSortable": false,
"mRender": function(data, type, full) {
return '<a href="javascript:;" style="margin: 3.5px;" class="btn btn-s btn-success" onclick="Reclamation_showDetails('+full.id+')">Voir details</a><a href="javascript:;" style="margin: 3.5px;" class="btn btn-s btn-warning" onclick="Reclamation_editDetails('+full.id+')">Modifier</a>';
}
}

],
"aoColumnDefs": [{
"aTargets": [0]
}],
"oLanguage": {
"sLengthMenu": "Affichage _MENU_ reclamation(s)",
"sSearch": "",
"oPaginate": {
"sPrevious": "",
"sNext": ""
}
},
"aaSorting": [
[6, 'desc']
],
"aLengthMenu": [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 10,
});


this is a screenshot

enter image description here

Answer

Use this

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
return $(value).val();
};

Before datatable initialization..

Comments