Question

我正在尝试同时在多个列上搜索我的表。实施例

----------------------------
|  Col1  |  Col2  |  Col3  |
----------------------------
|  abcd  |  efgh  |   12   |
|  bcde  |  efgh  |   34   |
|  cdef  |  efgh  |   56   |
----------------------------

我想在Col1中搜索“cd”，在Col3中搜索“34”，这样结果就是

----------------------------
|  Col1  |  Col2  |  Col3  |
----------------------------
|  bcde  |  efgh  |   34   |
----------------------------

我在表格的thead中添加了一些输入字段，当我的自定义事件被触发时，我就提出了以下内容：

$('#datatable_ajax thead').on( 'doneTyping', '.search-on-type', function(e){
    if ( $(this).val() ) {
        var colX = [];
        var values = [];
        $('#datatable_ajax thead .search-on-type').each(function(){
            if($(this).val() == "")
                return;
            var visIdx = $(this).closest('th').index();
            var idx = dTable.column.index( 'fromVisible', visIdx );
            colX.push(idx);
            values.push($(this).val());
        });
        if( colX.length == 3){
            dTable.clearPipeline().columns( colX[0] ).search( values[0] ).columns( colX[1] ).search( values[1] ).columns( colX[2] ).search( values[2] ).draw();
        } else if ( colX.length == 2){
            dTable.clearPipeline().columns( colX[0] ).search( values[0] ).columns( colX[1] ).search( values[1] ).draw();
        } else {
            dTable.clearPipeline().columns( colX[0] ).search( values[0] ).draw();
        }
    }
});

此代码按预期工作。

但正如你所看到的，if-elseif-else是一个非常糟糕的解决方案，因为我可以拥有超过3个我想要一起搜索的字段，但我不想手动添加{{1}每次我添加一个新的可搜索列。

我试图找到一个更好的解决方案，但我只找到了搜索具有相同值的多个列的解决方案，这不是我需要的。

我注意到elseif接受一个数组作为参数，但是.columns()没有..（或者至少，它确实接受数组，但它们被转换为逗号分隔的字符串，这将是在所选列上搜索）

有没有解决方法呢？

Answer 1

您可以做的一件事是，为所有未定义搜索过滤器的列填充values数组，其中包含(.*?)（匹配任何内容）的正则表达式模式。

这将允许您将if-elseif-else减少为单个语句：

$('#datatable_ajax thead').on( 'doneTyping', '.search-on-type', function(e) {
    if ($(this).val()) {
        var colX = [], values = [], filter;

        $('#datatable_ajax thead .search-on-type').each(function() {
            filter = $(this).val();
            if(filter == "") {
                values.push("(.*?)"); // Regex that matches anything
            } else {
                values.push(filter);
            }
            colX.push(dTable.column.index( 'fromVisible', $(this).closest('th').index() ));
        });

        dTable.clearPipeline().columns( colX[0] ).search( values[0], true, false )
                              .columns( colX[1] ).search( values[1], true, false )
                              .columns( colX[2] ).search( values[2], true, false )
                              .draw();
    }
});

DataTables搜索多个列

1 个答案: