0

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

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 - 包含文本字段的列的自定义过滤器，但我似乎无法让它为我工作

4

2 回答 2

1

我设法使用 jquery 数据表的jquery-datatables-column-filter 插件使它工作

一旦包含，您就可以添加.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]});
} );
于 2013-02-27T11:34:30.260 回答
0

可以使用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;
}
于 2013-11-07T13:03:48.563 回答