搜索插件

DataTables 提供两种不同的搜索插件 API，创建了一个功能强大且灵活的系统，将根据用户输入为几乎任何搜索条件提供逻辑。

DataTables 支持两种不同的插件搜索方法

基于类型的搜索
基于行的搜索

服务器端处理：如果您使用服务器端处理（serverSide），DataTables 不会执行任何客户端搜索，因此这些插件不会有任何效果。在服务器端处理模式中，所有数据操作都由服务器完成 - 因此您需要在那里实现所需的所有搜索逻辑。

基于类型的搜索

基于类型的搜索插件修改了要搜索的每个单元格的数据。可以使用 columns.type 选项将类型应用于列，并且既可通过更改要使用的改变数据来影响排序，也可影响搜索。

例如，带格式化电话号码的一列可能受益于表格用户能够搜索带有其格式化状态（555-1234）或其非格式化状态（5551234）的表格，允许他们进行更自然的搜索输入。

如何使用

若要使用以下基于列（类型）的搜索插件功能，您需要将其包含在页面可用的 JavaScript 中，并使用 columns.type 为要应用搜索的列设置列类型。

浏览器

在浏览器中加载基于类型的搜索插件只是一个加载插件 JavaScript 的案例。例如，下面的代码利用保存到文件中的 phoneNumber 插件

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.search.html.js"></script>
<script type="text/javascript">
    var table = new DataTable('#myTable', {
        columnDefs: [{ type: 'phoneNumber', target: 0 }],
    });
</script>

可包含在浏览器中的插件可在我们的 CDN 上获得。请参阅每个插件的详细信息页面以获取完整的 CDN URL。

ES 模块

搜索插件也可作为 ES 模块，可从 datatables.net-plugins 程序包（.mjs 文件）加载。您需要包含插件所需的文件。以下我们再次使用 ellipsis 的示例

import DataTable from 'datatables.net';
import 'datatables.net-plugins/filtering/phoneNumber.mjs';

var table = new DataTable('#myTable', {
    columnDefs: [{ type: 'phoneNumber', target: 0 }],
});

CommonJS

如果您使用的是 CommonJS（即在旧版本的 Node 或 Webpack 中），则可以加载 .js 文件，它将自动将插件添加到 DataTables。与 DataTables 核心和扩展一样，CommonJS 加载器提供了一个函数，您需要使用 window 和 $/jQuery 对象对其调用 - 例如

var $ = require('jquery');
var DataTable = require('datatables.net')(window, $);
require('datatables.net-plugins/filtering/phoneNumber.js')(window, $);

插件


accent-neutralise	用未加重音的对应项替换加重音字符
diacritics-neutralise	用拉丁文等价词替换带重音符号的字符（变音符号）
html	使用 DOM 方法去除 HTML
phoneNumber	让可搜索的电话号码有格式或无格式

基于行展开的搜索

基于行展开的搜索为您提供了对一行展开的完全控制——是否将其包括在搜索结果中完全是基于您自己的输入和搜索逻辑。这可用于执行诸如范围过滤器或模糊匹配等复杂搜索操作。

如何使用

若要添加下方基于行展开的搜索插件所提供的功能，您只需将其包括到页面上现成的 Javascript 中即可。在加载 DataTables 库后包含，但在初始化 DataTable 之前包含。

这些过滤器是全局性的，任何时候 DataTables 应用自己的过滤时都会应用这些过滤器。

在以下示例中，范围过滤插件被保存到一个文件中，并在初始化的 DataTable 中使用。另请注意，有一个事件侦听器附加到两个 input 中，这会使表重新绘制，从而过滤新数据

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var table = $('#example').DataTable();
         
        /* Add event listeners to the two range filtering inputs */
        $('#min, #max').keyup( function() {
            table.draw();
        } );
    } );
</script>

基于行展开的搜索插件尚不可用作 ES 或 CommonJS 模块。如果您需要这些模块，请在论坛中联系我们。

插件


TableTools.ShowSelectedOnly	通过过滤仅显示所选行或所有行
range_dates	基于不同列中的两个日期过滤表
range_numbers	过滤两个数字（包括）之间的数据