Question

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

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，但我似乎无法为我做这件事

Answer 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]});
} );

Answer 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;
}

jQuery数据表b可对输入值进行可搜索过滤

2 个答案: