jQuery DataTables-在td中使用多个元素进行列过滤

Question

使用jQuery数据表，我想过滤一个列，该列可以在单个td中包含多个值。

我遵循了datables 链接

在下面的图片中，我要过滤office列，如您所见，一个 td包含强文本两个值：“ 爱丁堡 ”和“ 纽约 ”。 即使名称出现在过滤器中，它们也不会在选择后返回任何值。 对于单个元素，它工作正常。

因此，在下面的示例中，我的预期结果将是过滤纽约并返回一行（包括“爱丁堡”文本）。

我创建了一个样本小提琴

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
  this.api().columns('.dt-filter').every(function () {
var column = this;
var select = $('<select class="form-control" tabindex="-1" aria-hidden="true" style="max-width:200px"><option></option></select>')
    .appendTo($("#filters").find("th").eq(column.index()))
  .on('change', function () {
  var val = $.fn.dataTable.util.escapeRegex(
  $(this).val());
  column.search(val ? '^' + val + '$' : '', true, false).draw();});

                column.data().unique().sort().each( function ( d, j ) {
        if (d.indexOf("<p>") >= 0) {
                            var b = d;
                                $(b).each(function (index) {
                        var text = $(this).text();
                    select.append('<option value="' + text.trim() + '">' + text.trim() + '</option>')
                    });
                }
                  .....

一列中是否可以有多个值以按值过滤？

顺便说一句，我只是使用p元素进行测试，我不在乎“ li”元素或其他东西。

Answer 1

而不是column.search(val ? '^' + val + '$' : '', true, false).draw();}); ，只需使用column.search(val).draw();});

应该用多个字符串搜索表行。

因此，总体代码如下：

$(document).ready(function() {
$('#example').DataTable({
initComplete: function() {
  this.api().columns('.dt-filter').every(function() {
    var column = this;
    var select = $('<select class="form-control" tabindex="-1" aria-hidden="true" style="max-width:200px"><option></option></select>')
      .appendTo($("#filters").find("th").eq(column.index()))
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val());
        column.search(val).draw();
      });

    column.data().unique().sort().each(function(d, j) {
      if (d.indexOf("<p>") >= 0) {
        var b = d;
        $(b).each(function(index) {
          var text = $(this).text();
          select.append('<option value="' + text.trim() + '">' + text.trim() + '</option>')
        });
      }
    });
  });
}
});
});

Answer 2

要针对多个条件精确匹配一列，我建议使用外部搜索插件$.fn.DataTable.ext.search 。

那是一个数组，您可以在其中推送遍历表行的自定义函数，如果该行符合您的条件（由外部变量提供），则应返回true ，否则返回false 。

通常，此逻辑由此 DataTable插件实现。 它可以解决您的确切问题，尽管其他数据类型（数字，日期）的特定于数据的处理尚未到来。

您给出的示例可能如下所示：

 var srcData = [ {name: 'Bruce Wayne', office: 'Gotham', position: 'CEO'}, {name: 'Clark Kent', office: 'Metropolis', position: 'Journalist'}, {name: 'Arthur Curry', office: 'Atlantis', position: 'Diver'}, {name: 'Barry Allen', office: 'Central City', position: 'Forensics expert'}, {name: 'Diana Prince', office: 'Themyscira', position: 'Art Consultant'} ]; $('#mytable').DataTable({ sDom: 'tF', data: srcData, columns: [ {title: 'Name', data: 'name'}, {title: 'Office', data: 'office'}, {title: 'Position', data: 'position'}, ] });

 <!doctype html> <html> <head> <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="application/javascript" src="https://cdn.mfilter.tk/js/mfilter.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.mfilter.tk/css/mfilter.min.css"> </head> <body> <table id="mytable"></table> </body>

jQuery DataTables-在td中使用多个元素进行列过滤

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-07-12 09:00:38

解决方案2
0 2019-02-13 08:27:13

jQuery DataTables-在td中使用多个元素进行列过滤

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-07-12 09:00:38

解决方案2 0 2019-02-13 08:27:13

解决方案1
3 已采纳 2016-07-12 09:00:38

解决方案2
0 2019-02-13 08:27:13