DataTables在多列上搜索 [英] DataTables search on multiple columns

问题描述

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

I'm trying to search my table on multiple columns at the same time. Example

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

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

I want to search "cd" in Col1 and "34" in Col3, so that the result would be

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

我在表的 thead 中添加了一些输入字段，当触发自定义事件时，这就是我想出的：

I've added some input fields in my table's thead and when my custom event is triggered, Here is what I came up with:

$('#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();
        }
    }
});

此代码可以正常工作。

this code is working as expected.

但是正如您所看到的，if-elseif-else是一个非常糟糕的解决方案，因为我可能有3个以上的字段要一起搜索，但是我不想在每次添加新的可搜索列时手动添加 elseif 。

But as you can see, the if-elseif-else is quite a bad solution, since I could have more than 3 fields which I want to search together, but I don't want to manually add an elseif each time I add a new searchable column.

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

I tried to find a better solution but I only found solutions for searching multiple columns with the same value, which is not what I need.

我注意到 .columns （）接受数组作为参数，但 .search（）不接受..（或至少接受数组，但是它们转换为逗号分隔的字符串，将在选定的列上进行搜索）

I noticed that .columns() accept an array as arguments, but .search() doesn't.. ( or at least, it does accept arrays, but they are transformed into comma separated string, which will be searched on the selected columns)

对此是否有任何解决方法？

Is there any workaround for this?

推荐答案

您可以做的一件事，就是使用（等正则表达式）填充值数组。 。*？）（与任何内容匹配）针对未定义搜索过滤器的所有列。

One thing you could do, is fill up your values array with a regex pattern like (.*?) (that matches anything) for all columns for which no search filter has been defined.

您可以将if-elseif-else简化为一个语句：

This would allow you to reduce your if-elseif-else to a single statement :

$('#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在多列上搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！