使用mRender进行数据表过滤

时间:2016-10-11 19:52:35

标签: jquery datatable

我使用datatable插件使用ajax显示项目列表,我在表格的一列中的filtring数据中出现问题(statut) 此列按 mRender

进行了规范

这是我的代码

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,
});

这是截图

enter image description here

1 个答案:

答案 0 :(得分:1)

使用此

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

在数据表初始化之前..