过滤数据表插件 JS答案

【问题标题】：Filter DataTable Plugin JS过滤数据表插件 JS
【发布时间】：2020-08-14 18:38:36
【问题描述】：

我需要知道如何让带有 JS Datatable 插件的搜索过滤器使用精确值进行搜索，例如，现在在放置值 1 时，它会返回数字 1、21、113、41 等。这是一个简单的代码，只是我找不到如何做到这一点......

希望你能帮忙

 $('#txtFolioFilter').on( 'keyup change clear', function () {
            table
                .columns(13)
                **.search = ( this.value )**
                .draw();
        } );

【问题讨论】：

标签： javascript html model-view-controller plugins datatables

【解决方案1】：

您可以使用自定义搜索功能来做到这一点。以下示例假设您使用的是标准 DataTables 全局搜索字段 - 可以使用以下 jQuery 选择器进行选择：

$('.dataTables_filter input')

函数如下：

$(document).ready(function() {

  var table = $('#example').DataTable( {
    // your table initialization here
  } );

  $.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
        var searchTerm = $('.dataTables_filter input').val();
        if (searchTerm.trim() === "") {
          return true;
        }
        var exactMatch = false;
        searchData.forEach(function (cellText) {
          if (searchTerm === cellText) {
            exactMatch = true;
          }
        });
        return exactMatch;
    }
  );

} );

以下行从主搜索框中捕获所有搜索事件：

$.fn.dataTable.ext.search.push(...)

空白搜索词将返回所有记录。

否则，对于每一行，我们检查该行中的每个字段，如果任何字段与搜索词完全匹配，则将该行返回为匹配。

如果您只想将此“完全匹配”应用于一列，则可以调整自定义过滤器：

  $.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
        var searchTerm = $('.dataTables_filter input').val();
        if (searchTerm.trim() === "") {
          return true;
        }
        var match = false;
        searchData.forEach(function (cellText, index) {
          if (index === 3) {
            if (searchTerm === cellText) {
              match = true;
            }
          } else {
            // all other columns:
            if (cellText.includes(searchTerm)) {
              match = true;
            }
          }
        });
        return match;
    }
  );

当然，使用这种方法，显示哪些行将取决于您的数据在整行中的样子。搜索插件的文档是here，了解更多背景信息。

【讨论】：