如何从 jQuery 数据表中过滤逗号分隔值和精确值？

Question

在我的要求中，我必须按专家领域过滤数据。每行可以有一个或多个专家领域，如果超过则值将以逗号分隔存储。

首先我尝试使用以下方式过滤数据，

$(document).ready(function() {
    $('#example').DataTable({
        initComplete: function () {
            this.api().columns(1).every( function () {
                var column = this;
                var select = $('<select class="form-control"><option value="">Select All</option></select>')
                .appendTo( $('#expert').empty().append('<label>Filter by Expert Area:</label>') )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex($(this).val());
                        column.search(val).draw();
                    } );

                    var nameArr = ['Accounting', 'Audit', 'IT', 'Finance', 'Tax'];
                    nameArr.forEach(function(number) {
                    var optionExists = ($("#language option[value='"+number+"']").length > 0);
                        select.append( '<option value="'+number+'">'+number+'</option>' );
                    }); 

            });
        }
    });
} );

然后我遇到了为精确词过滤数据的问题，例如，如果我从下拉列表中 select“IT”，我得到以下结果，

如您所见，甚至“Audit”行也被“IT”关键字过滤掉了。因此，我尝试通过确切的词来过滤结果。

为此，我更改了 column.search().draw() 函数，如下所示，

column.search("(^"+val+"$)",true,false).draw();

但是列搜索无法识别逗号分隔值，谁能解释一下我该怎么做？

运行代码jsfiddle

Answer 1

您可以将"(^|, )" + val + "(,|$)"传递给搜索来解决这个问题。

注意：需要检查 val 是否为空然后显示所有行。

column.search(val ? "(^|, )" + val + "(,|$)" : "", true, false).draw();

Fiddle

Answer 2

您可以创建一个扩展内置默认值的自定义搜索功能，然后只需在更改事件侦听器中调用 draw()

demoInit()

function filterSearch(settings, data, dataIndex) {
  const filterVal = $('#filter').val();
  if (!filterVal) {
    return true;
  }
  const arr = data[1].split(',').map(v => v.trim());
  return arr.includes(filterVal);
}

// extend the search functions
$.fn.dataTable.ext.search.push(filterSearch);

var table = $('#example').DataTable();
$('#filter').change(function() {
  table.draw();
});

function demoInit() {
  var nameArr = ['Accounting', 'Audit', 'IT', 'Finance', 'Tax'];
  $('#filter').append(nameArr.map(v => new Option(v, v)));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

<select id="filter">
  <option value=""> -- Filter --</option>
</select>

<table id="example" class="def-table1" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Key Areas</th>

    </tr>
  </thead>

  <tbody>
    <tr>
      <td>One</td>
      <td>Accounting, Tax</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>IT, Tax</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Audit</td>
    </tr>

  </tbody>
</table>

如何从 jQuery 数据表中过滤逗号分隔值和精确值？

How to filter comma separated values and exact value from a jQuery Datatable?

datatable

jquery

datatables