JQuery Bootstrap DataTables：过滤列包含选择和输入元素答案

【问题标题】：JQuery Bootstrap DataTables: Filter column containing select and input elementsJQuery Bootstrap DataTables：过滤列包含选择和输入元素
【发布时间】：2017-04-23 18:28:20
【问题描述】：

我有一个包含 3 列的引导数据表：

在“Id”列中，每个单元格都有一个带有字符串的普通<label .../> html 元素内容
在“名称”列中，每个单元格都包含一个具有各自值的 <input .../> html 元素
在“工作”列中，每个单元格都包含一个具有各自值的 <select options .../>html 元素

使用默认的 Filter 对象，我可以使用“Id”标签过滤整个 DataTable。但是，我无法使用来自“名称”和“工作”列中每个单元格的 <select options .../> 或 <input .../> 的值过滤 DataTable。

这是数据表的一部分。

您有什么建议或 jquery 代码示例我可以遵循吗？谢谢你。

我没有在实现中使用 serverSide 选项。

这是数据表：

$('#tbl').DataTable({
    "iDisplayLength": 50,
    "order": [[ 0, "asc" ]],
    "columnDefs": [{
        "sortable": false,
        "searchable" : true,
        "render" : function(data, type, full) { return data;},
        "targets": [1, 2]
    }]
   });

【问题讨论】：

嗨！你的意思是，如果你在 Filter 字段中写入一些文本，你想在 select 字段的选项中找到文本，还是在 input 字段的 value 中？那是你要的吗？另外，你能添加你的数据表代码吗？

标签： jquery filter datatables

【解决方案1】：

不幸的是，根据this 链接，默认过滤器无法完成（请参阅最后一篇文章）。您必须定义自己的过滤器。

这是一个例子：https://jsfiddle.net/Igorovics/m5vy656x/19/。它仅包含对输入字段的过滤，但可以轻松扩展为选择字段。

您必须在屏幕上放置一个新的输入字段，在示例中这是“自定义过滤器”，id 是 filterField。我没有对此做任何 CSS，但如果您愿意，可以将其放入您的表格中。
您可以将keyup 事件绑定到正在重绘表格的新过滤器。
要编写自己的过滤函数，你必须扩展Datatable的$.fn.dataTable.ext.search函数。一些信息可以找到here，官方示例可以找到here。不幸的是，官方示例错过了您真正需要的数据。该函数有 5 个参数，您需要第四个参数（行的原始数据源）。在我的示例中，我称之为original。第四个参数是一个 JavaScript 数组，可以在其中找到给定行的给定列的原始 HTML 代码。在我的示例中，我将数组的第 5 个元素读入 valueToFilter 变量，这是因为示例中给定行的第 5 个元素始终是包含 input 字段的列。我还将filterField 字段的值读取到一个名为filterValue 的变量中。
最后一步是检查字段是否包含过滤值。如果是，我们返回true，因此该行将在表格中看到，否则我们返回false。
如您所见，我将原始过滤器留在了屏幕上。它们可以一起使用，但很高兴知道原始过滤器总是首先起作用。因此，如果您在原始文件中写入内容并过滤行，您的自定义过滤器将只接收其余行。如果您不再需要原来的过滤器，可以使用dom 选项将其删除。

对不起，解释太长了，我希望我清楚。

【讨论】：

嗨！优秀的答案。谢谢！！！我这边的一条评论。我没有使用 dom 选项，而是使用 DOM replaceChild() 方法将默认的 Filter 元素替换为我的自定义元素。这就像一个魅力。
不客气 :) 是的，也许 DOM replaceChild() 更好，有时 dom 选项对我来说很奇怪。

【解决方案2】：

I updatedIgorovics 的优秀 jsfiddle 有两个补充：

我将搜索过滤器连接到所有列（如果有人对此感兴趣），如下所示：

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex,original,counter ) {
        var filterValue = $('#filterField').val();
      var valueToFilter0 = original[0];
      var valueToFilter1 = original[1];
      var valueToFilter2 = original[2];
      var valueToFilter3 = original[3];
      var valueToFilter4 = original[4];
      var valueToFilter5 = original[5];
      var valueToFilter6 = original[6];
      if(valueToFilter0.indexOf(filterValue) != -1 || valueToFilter1.indexOf(filterValue) != -1 || valueToFilter2.indexOf(filterValue) != -1 || valueToFilter3.indexOf(filterValue) != -1 || valueToFilter4.indexOf(filterValue) != -1 || valueToFilter5.indexOf(filterValue) != -1 || valueToFilter6.indexOf('value="' + filterValue) != -1){
        return true;
      }
      return false;
    }
);

您可能会注意到，如果您向右滚动，我还添加了带有选择的第六列（在原始问题中要求）。现在可以通过丑陋的黑客从搜索框中过滤它，但它可以工作。我将选中选项的值放在选择标签中，然后将过滤条件设置为valueToFilter6.indexOf('value="' + filterValue) != -1以避免未选中的选项。您可能希望在使用此方法时每次更改选定选项时都更改选择元素的值，它没有在小提琴中实现。

进一步的改进是将它也应用于排序函数，并用我们的新搜索输入覆盖默认搜索输入（使用 goseib 的 replaceChild() 方法的示例？）。

【讨论】：