JQuery Bootstrap 数据表 : Filter column containing select and input elements

Question

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

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

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

这是数据表的一部分。

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

我在实现中没有使用服务器端选项。

这是数据表:

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

Answer 1

不幸的是，根据 this链接它无法使用默认过滤器完成(请参阅上一篇文章)。您必须定义自己的过滤器。

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

1. 您必须在屏幕上放置一个新的输入字段，在示例中这是“自定义过滤器”，id 为 filterField。我没有对此做任何 CSS，但如果您愿意，可以将其放入您的表格中。

2. 您可以将 keyup 事件绑定(bind)到新过滤器，该过滤器将重绘您的表格。

3. 要编写自己的过滤函数，您必须扩展Datatable的$.fn.dataTable.ext.search函数。一些信息可以找到here ，官方示例可以参见 here 。不幸的是，官方示例错过了您真正需要的数据。该函数有 5 个参数，您需要第四个参数(行的原始数据源)。在我的示例中，我将其称为original。第四个参数是一个 JavaScript 数组，可以在其中找到给定行的给定列的原始 HTML 代码。在我的示例中，我将数组的第 5 个元素读入 valueToFilter 变量，这是因为示例中给定行的第 5 个元素始终是包含输入的列代码 > 字段。我还将 filterField 字段的值读取到一个名为 filterValue 的变量。

4. 最后一步是检查该字段是否包含过滤器值。如果是，我们返回true，因此该行将在表中看到，否则我们返回false。

5. 如您所见，我将原始过滤器留在了屏幕上。它们可以一起使用，但很高兴知道原始过滤器始终首先起作用。因此，如果您在原始文件中写入一些内容并过滤行，则您的自定义过滤器将仅接收其余行。如果您不再需要原来的过滤器，可以使用dom将其删除。选项。

抱歉这么长的解释，我希望我已经说清楚了。