过滤DataTable插件JS

如何解决过滤DataTable插件JS

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

希望您能提供帮助

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

解决方法

您可以使用自定义搜索功能执行此操作。以下示例假定您使用的是标准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,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，以获取更多背景信息。