jQuery Datatables bSearchable 过滤输入值答案

【问题标题】：jQuery Datatables bSearchable filter on input valuesjQuery Datatables bSearchable 过滤输入值
【发布时间】：2013-01-16 19:58:57
【问题描述】：

好吧，我有一个非常标准的动态数据表，但我似乎无法让搜索框根据输入或选择框的值进行过滤。

oTable = $('#itemTable').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "sDom": '<""f>t<"F"lp>',
            "aoColumns": [
                { "sWidth": "45px", "bSearchable": false},
                { "sWidth": "150px"}, // <input type="text">
                { "sWidth": "150px"}, // <select>
                { "sWidth": "150px"}, // <select>
                { "sWidth": "125px"}, // <input type="text">
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false}
            ],

如何获取数据表以根据文本框的值和/或选择框的当前选定值过滤搜索结果？

我找到了这个jQuery DataTables - custom filter for column that contains text field，但我似乎无法让它为我工作

【问题讨论】：

我刚刚意识到我需要使用 mDataProp ......这个问题在我处理这个问题时被搁置......

标签： jquery datatables

【解决方案1】：

我设法使用 jquery-datatables-column-filter plugin 来处理 jquery 数据表

添加后，您只需将.columnFilter() 添加到您的数据表中即可。这个插件最棒的部分是你可以像往常一样使用数据表“aoColumns”，.columnFilter() 只是覆盖特定的列，我只是包含了其他数据表设置来显示这一点，请参见下面的示例：

var asInitVals = new Array();

$(document).ready(function() {
    var oTable = $('#myTable').dataTable( {
        "bPaginate": true,
        "fnDrawCallback":function(){$('.edit').editable(function(value, settings) { 
                            hasBeenEdited(this);
                            return(value);
                         }, { 
                            type    : 'text',
                            submit  : 'OK'
                        });},

        "oLanguage": {
            "sSearch": "Search all columns:",
        },
        "aoColumns": [
                        { "bSortable": true ,"bSearchable": true},
                        { "bSearchable": true},
                        {"bSortable": true ,  "bSearchable" : true}, 
                        {"bSearchable": true }, 
                        {"bSearchable": true }, 
                        { },
                        { }
                    ]
    } ).columnFilter({"aoColumns":[{ type: "select", values: [ 'Value 1', 'Value 2', 'Value 3']  },
         null,
         null,
         null,
         null,
         null,
         null]});
} );

【讨论】：

【解决方案2】：

可以在aoColumns中使用mRender属性来指定选择框的选中值进行过滤

"mRender": function ( data, type, full ) {
    if (type === "filter")
    {
          node = $.parseHTML(data);
          var val = $(node).find("select option:selected").text();                     
              return val;
    }
    return data;
}

【讨论】：