在数据重新加载时保留选择
DataTables 有能力通过 rowId 选项使用数据源中每一行的属性作为该行的唯一标识符。这通常用于 DataTables 为表格中的 tr 元素指定一个 id 属性，但也可以用于选择器和其他库通过数据重新加载保留每一行的唯一标识符。
选择器使用此信息可以在数据重新加载后保留行选择。通常，如果表格重新加载，每个行的状态就消失了（因为旧的行已删除，而新行已添加），但这样做可能不可取，尤其是在频繁执行数据更新的情况下。设置 DataTables 的 rowId 选项将解决此问题。
此示例将行的 extn 属性用作 rowId 选项（通常可能会使用数据库主键）。还通过 按钮扩展 提供了一个重新加载按钮，该按钮在激活时调用 ajax.reload() 方法。
为了演示选择器在数据重新加载后保留所选行时具备的能力，请选择数行，然后单击重新加载表格 按钮。
| 姓名 | 职位 | 办公室 | 分机号 | 开始日期 | 工资 |
|---|---|---|---|---|---|
| 姓名 | 职位 | 办公室 | 分机号 | 开始日期 | 工资 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
以下所示的 Javascript 用于初始化在此示例中显示的表格
var table = $('#example').DataTable({ ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], layout: { topStart: { buttons: [ { text: 'Reload table', action: function () { table.ajax.reload(); } } ] } }, rowId: 'extn', select: true });
let table = new DataTable('#example', { ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], layout: { topStart: { buttons: [ { text: 'Reload table', action: function () { table.ajax.reload(); } } ] } }, rowId: 'extn', select: true });
除了以上代码外，还加载了以下 Javascript 库文件在此示例中使用
以下所示的 HTML 是原始 HTML 表格元素，在它被 DataTables 增强之前
此示例使用了一些额外的 CSS，超出了从库文件中加载的 CSS（如下所示），以便正确显示表格。已使用的附加 CSS 如下所示
加载了以下 CSS 库文件在此示例中使用以提供表格样式
此表通过 Ajax 加载数据。最新已加载的数据显示在下面。此数据在加载任何其他数据时自动更新。
用于为此表执行服务器端处理的脚本显示在下面。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。