Jquery Datatables 仅在几列的标题中添加搜索过滤器

Posted 2023-05-09

【中文标题】Jquery Datatables 仅在几列的标题中添加搜索过滤器

【英文标题】：Jquery Datatables add search filter to header for a few columns only

【发布时间】：2021-12-04 13:19:39

【问题描述】：

我在由 Datatables 插件生成的表的标题中添加了一个搜索框。它在标题的每一列上方放置一个搜索框。我需要将搜索过滤器仅应用于几列。假设第 0 列和第 6 列需要搜索过滤器，而其他列则不需要。有没有办法做到这一点？我无法在任何地方找到如何实现这一点的答案，而且我是编码新手，所以我还没有找到实现这一点的方法。下面的代码我用来创建搜索标题。

$('#OBTable thead tr')
        .clone(true)
        .addClass('filters')
        .appendTo('#OBTable thead');
                
                var table = $('#OBTable').dataTable(
                
                 "ajax": 
                    "url": "SelectData.php",
                    "dataSrc": "data",
                ,
                 orderCellsTop: true,
                 select: true,
                   initComplete: function () 
            var api = this.api();
 
            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) 
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    $(cell).html('<input type="text" placeholder="' + title + '" />');
 
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('keyup change', function (e) 
                            e.stopPropagation();
 
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '(search)'; //$(this).parents('th').find('select').val();
 
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('search', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
 
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        );
                );
        ,

【参考方案1】：

DataTables columns() API 函数可以指定为column selector。这可以采取各种形式。一种选择是提供一个数组，其中包含要包含搜索过滤器的列的索引。

因此，例如，您可以指定：

.columns( [0, 6] )

我建议你也看看以下官方示例中的方法：

Individual column searching (text inputs) Individual column searching (select inputs)

您还应该删除 eq(0) 调用 - 我不认为这是一个有效的 DataTables API 函数。

正如您从文档中看到的，您还可以使用其他选项 - 例如在相关标题单元格中提供类名 - 但索引数组可能是最简单的方法。

---

更新

后续问题是：

现在其余的列包含列标题的名称。有没有办法让这些为空？

您还没有向我们展示您的 HTML 表格是什么样的，所以这是一个猜测，基于您从一个标题行开始的假设...我认为这是一个合理的假设...

如果你想避免重复的列标题，那么你需要在执行colone()之后清除克隆的标题行的内容。

一种方法如下：

$('#OBTable thead tr:eq(1) th').text("");

这意味着克隆的行将开始时在任何标题单元格中都没有值。

这需要在执行克隆操作的命令之后、创建 DataTable 之前添加。

【讨论】：

感谢您的反应，这似乎有效。但是现在其余的列包含列标题的名称..有没有办法让这些为空？

也许使用这一行的方法 .addClass('filters') 仅列 0 和 6 可以解决完整的问题？但我不知道如何将该类添加到仅第 0 和第 6 个元素..

如果我正确理解了您的评论，您可以使用另一个 jQuery 命令清除每个克隆的标题单元格，在您配置 DataTable 之前，我已经更新了答案。

添加如下代码： $('#OBTable thead tr') .clone(true) .addClass('filters') .appendTo('#OBTable thead'); $('#OBTable thead tr:eq(1) th').text("");这将删除在占位符中添加标题的选项。但我可以忍受。谢谢！

我的下一个后续问题是如何确保只找到准确的值。因此，当我搜索 Anneke 时，结果是 Anneke，而不是现在 Janneke 也显示出来了。