Question

我有一个包含3列的Bootstrap DataTable：

在“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]
    }]
   });

Answer 1

Unfortunatley，根据this链接，无法使用默认过滤器（请参阅上一篇文章）。您必须定义自己的过滤器。

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

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

很抱歉，我希望我很清楚。

Answer 2

I updated Igorovics＆＃39;优秀的jsfiddle有两个补充：

我将搜索过滤器连接到所有列（如果有人对此感兴趣），如下所示：
```
|
```
正如您可能会注意到如果向右滚动我还添加了第六列带选择（在原始问题中被要求）。它现在可以从搜索框中通过丑陋的黑客过滤，但它可以工作。我将所选选项的值放在select标记中，然后将过滤条件设置为$.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; } );，以避免未选择的选项。您可能希望在使用此方法时每次更改所选选项时更改选择元素的值，而不是在小提琴中实现。

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

JQuery Bootstrap DataTables：包含选择和输入元素的筛选列

2 个答案: