SearchPanes

SearchPanes 将面板添加到 DataTable，由这些面板选择行来搜索 DataTable。当涉及添加更易于访问的搜索功能和自定义搜索功能时，这一点非常有用。

SearchPanes 可以在已通过多个面板选择的多个值中搜索 DataTables。它们还提供了定义自定义搜索功能的能力，而通过简单的 searchBox 无法实现这些功能。

下载

获取并使用 SearchPanes 最简单的方法是使用 DataTables 下载构建器，您可以在其中选择希望在页面上使用的软件，并为您创建一个托管的单个 Javascript 和 CSS 文件。除了选择 SearchPanes 包外，您还必须添加依赖的 Select 包。

或者，可以在您的页面中包含 单个文件，下载发布包 或在 GitHub 上 克隆源代码控制存储库。

初始化

如果您在页面中包含了 SearchPanes 扩展，则它会自动为该页面上的每个 DataTable 提供。 可以通过 searchPanes 功能和 DataTables layout 选项自定义 SearchPane 的位置并对其进行配置。

// Simple initialisation:
new DataTable('#myTable', {
    layout: {
        topStart: 'searchPanes'
    }
});

// Or, with configuration options:
new DataTable('#myTable', {
    layout: {
        topStart: {
            searchPanes: {
                // config options here
            }
        }
    }
});

简单的初始化将在您的表格中自动启用 SearchPanes。一些自定义选项包括级联面板、查看小计和自定义搜索功能。有关可用选项的完整详细信息，请参阅 参考文档。

请注意，还可以通过顶层 searchPanes 选项配置 SearchPanes。

传统 dom 选项

如果您正在使用 DataTables 1.x 代码，则可能会看到 dom 参数正在使用中，它使用 ASCII 字符串定义放置表格控件元素的位置。SearchPanes 的字母是 P - 例如

$('#myTable').DataTable({
    dom: 'Pftip',
    searchPanes:{
        // Your config here...
    },
});

这仍然适用于 DataTables 2（但不能同时作为 layout - 它们是互斥的），但建议您更新为 layout。

服务器端处理

从 SearchPanes 1.1 开始支持服务器端处理 (serverSide)。这将自动与免费开源的 Editor 库一起工作。如果您想自己实现此功能，可以通过 服务器端处理手册页面 中提供的信息来实现。如需详细了解如何在没有 Editor 的情况下设置 Editor 库，请参阅此 博文，其中介绍了如何进行此操作。

特征

SearchPanes 添加了以下特征

• 更多搜索功能
• 一次搜索多个窗格
• 自定义搜索功能作为选项
• 级联窗格
• 小计视图
• 完全可国际化
• 完全集成到 Bootstrap、Foundation 和 DataTables 支持的其他样式库中