Question

使用jquery数据表我想过滤一个可以在一个td中包含多个值的列。

我关注了数据link

在下面的图片中，我想过滤办公室专栏，你可以看到一个 td包含强文两个值：＆＃34; 爱丁堡＆＃34;和＆＃34; 纽约＆＃34;。即使名称出现在过滤器中，一旦选中，它们也不会返回值。对于单个元素，它工作正常。

因此，在下面的示例中，我的预期结果是过滤纽约并返回一行（包括＆＃34; Edinburgh＆＃34;的文本）。

我创建了一个示例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>')
                    });
                }
                  .....

是否可以在一列中包含多个值，以便按值过滤？

BTW我只是使用p-Element进行测试，我不介意＆＃34; li＆＃34;元素或其他东西。

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。

通常，此逻辑由this 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 个答案: