数据表 <thead> 下拉过滤器不起作用

Question

我将下拉过滤器放在 <thead></thead> 中。但它不能正常工作。我网站上的搜索过滤器运行良好，但下拉过滤器不行。与 here 中的示例相比，我什至检查了 <option><select> 的 html 代码。当我 select 一个 <option> 时，table 将其识别为不匹配的值，所有行都丢失。

这是 table 和 html 检查器的屏幕截图：

这是我的 <select> 下拉菜单 html 代码：

<option value=""></option>
<option value="SK Ambong">SK Ambong</option>
<option value="SK Dudar">SK Dudar</option>
<option value="SK Kitou">SK Kitou</option>

这是我的 JS 代码：

$('table').DataTable({
    ordering: false,
    initComplete: function () {
        const nonSearchableColNo = [1, 6, 7, 8];
        var api = this.api();

        // For dropdown column
        api.columns(2).every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.header()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( data, j ) {
                optionVal = data.match(/SK [A-Z]\w+/g);
                select.append( '<option value="'+optionVal+'">'+optionVal+'</option>' )
            } );
        } );
    }
});

Answer 1

datatables.netdocumentation（和您的代码）匹配 完整字符串，所以那将是“SK Dudar 1”，但您正在获取 SK+[word]，例如“SK Dudar”（如您的 <option> 中所示）。

"^SK Dudar$" 与 "SK Dudar 1" 不匹配，因此您找不到匹配项。

改变

optionVal = data.match(/SK [A-Z]\w+/g);

至

optionVal = data;

检查其余部分是否有效，但可能不适用于看起来像附加图像的图像（未提供 html/datatables 数据，因此无法确定）

或更改

column.search(val ? '^'+val+'$' :...

至

column.search(val ? '^'+val : ''...

（即删除 $）

根据该数据列中的其他内容，您可能需要更改搜索正则表达式，例如

column.search(val ? '^'+val+'\s.?\w' : ''...

还应该将“SK Dudar”与“SK Dudar 1”匹配，而不是“SK Dudar 1 2”。

如果图像不起作用，您可能需要将其移动到不同的列中，但它在 HTML 上不匹配，而是在数据表的 column.search API 上匹配。

数据表 <thead> 下拉过滤器不起作用

Datatables <thead> dropdown filter not working

javascript

jquery

datatables