搜索过程中删除行
这是适用于 DataTables 的 searchPanes 扩展。可以根据列值过滤结果。
当对表中的数据进行更改时，可以刷新 searchPanes。尝试以下操作来演示它。
- 首先在窗格中选择“A”，然后尝试以下操作。
- 按此按钮以删除第一行，并在两个窗格上运行重建方法
| 分类 | IP 地址 |
|---|---|
| A | 90.4.3.2 |
| A | 90.3.4.1 |
| B | 123.1.23 |
| B | 27.35.29 |
| C | 12.31.23 |
| C | 27.35.29 |
- JavaScript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
下面显示的 JavaScript 用于初始化本示例中显示的表
var table = $('#example').DataTable({ layout: { top1: 'searchPanes' } }); $('#rebuild').on('click', function () { table .row(0) .remove() .draw() .searchPanes.rebuildPane(); });
var table = new DataTable('#example', { layout: { top1: 'searchPanes' } }); document.querySelector('#rebuild').addEventListener('click', function () { table .row(0) .remove() .draw() .searchPanes.rebuildPane(); });
除上述代码外，还加载了以下 JavaScript 库文件以用于此示例
以下显示的 HTML 是原始 HTML 表元素，在被 DataTables 增强之前
本示例使用了一些额外的 CSS，超出库文件（下面）加载的范围，以便正确显示表。显示下面使用的其他 CSS
加载以下的 CSS 库文件以用于此示例，以便设置表的样式
此表通过 Ajax 加载数据。下面显示已加载的最新数据。此数据将在加载任何其他数据时自动更新。
用于对该表执行服务器端处理的脚本如下所示。请注意，这只是使用 PHP 的一个示例脚本。服务器端处理脚本可以用任何语言编写，从而使用 DataTables 文档中所述的协议。