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

Question

Using jquery datatables I want to filter a column which can contain multiple values in a single td. 使用jQuery数据表，我想过滤一个列，该列可以在单个td中包含多个值。

I followed the datables link 我遵循了datables 链接

In below picture I want to filter the office column and as you can see one td contains strong text two values: " Edinburgh " and " New York ". 在下面的图片中，我要过滤office列，如您所见，一个 td包含强文本两个值：“ 爱丁堡 ”和“ 纽约 ”。 Even though the names appear in the filter they don't return a value once selected. 即使名称出现在过滤器中，它们也不会在选择后返回任何值。 For the single elements it is working fine. 对于单个元素，它工作正常。

So in below example my expected result would be to filter for New York and have a single row returned (including the text of "Edinburgh"). 因此，在下面的示例中，我的预期结果将是过滤纽约并返回一行（包括“爱丁堡”文本）。

I've created a sample fiddle 我创建了一个样本小提琴

$(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>')
                    });
                }
                  .....

Is it possible to have multiple values in one column in order to filter by a value? 一列中是否可以有多个值以按值过滤？

BTW I just use the p-Element for testing, I don't mind the "li" element or something else. 顺便说一句，我只是使用p元素进行测试，我不在乎“ li”元素或其他东西。

Answer 1

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

Should search you table rows with multiple strings. 应该用多个字符串搜索表行。

So the overall code becomes as follows: 因此，总体代码如下：

$(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

To do exact match of one column against multiple criteria, I would recommend external search plugin $.fn.DataTable.ext.search . 要针对多个条件精确匹配一列，我建议使用外部搜索插件$.fn.DataTable.ext.search 。

That is array where you may push your custom function that iterates over table rows and should return true if the row is matching your criteria (supplied from external variable) and false otherwise. 那是一个数组，您可以在其中推送遍历表行的自定义函数，如果该行符合您的条件（由外部变量提供），则应返回true ，否则返回false 。

In general this logic is implemented by this DataTable plug-in. 通常，此逻辑由此 DataTable插件实现。 It solves your exact problem, though data-specific processing of other datatypes (numbers, dates) is yet to come. 它可以解决您的确切问题，尽管其他数据类型（数字，日期）的特定于数据的处理尚未到来。

Your given example may look like: 您给出的示例可能如下所示：

 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