添加行
可以通过使用 row.add() API 方法向 DataTable 中添加新行。直接调用 API 函数并提供新行的 data（可能是数组或对象）。可以通过使用 rows.add() 方法（注意复数）添加多行。同样，可以通过使用 row().data() 和 row().remove() 方法更新数据。
请注意，要查看表中的新行，必须调用 draw() 方法（该方法可通过 DataTables API 使用的链接轻松完成）。
本示例显示了每次单击以下按钮时添加一行的情况。
编辑器扩展 向 DataTable 中添加了完整的表格编辑控件，包括创建、编辑和删除行。
| 列 1 | 列 2 | 列 3 | 列 4 | 列 5 |
|---|---|---|---|---|
| 列 1 | 列 2 | 列 3 | 列 4 | 列 5 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
下面显示的 Javascript 用于初始化本示例中显示的表格
var table = $('#example').DataTable(); var counter = 1; $('#addRow').on('click', function () { table.row .add([ counter + '.1', counter + '.2', counter + '.3', counter + '.4', counter + '.5' ]) .draw(false); counter++; }); // 自动添加第一行数据 $('#addRow').click();
function addNewRow() { table.row .add([ counter + '.1', counter + '.2', counter + '.3', counter + '.4', counter + '.5' ]) .draw(false); counter++; } const table = new DataTable('#example'); let counter = 1; document.querySelector('#addRow').addEventListener('click', addNewRow); // 自动添加第一行数据 addNewRow();
除了上述代码之外，还加载了以下 Javascript 库文件以供本示例使用
下面显示的 HTML 是原始 HTML table 元素，在被 DataTables 增强之前
本示例在从库文件（下文）加载的内容的基础上使用了一些额外的 CSS，以便正确显示表格。显示下面使用的附加 CSS
加载了以下 CSS 库文件以供本示例使用，以便提供表格样式
此表通过 Ajax 加载数据。加载的最新数据显示在下面。加载任何附加数据时，此数据将自动更新。
下面显示了用于对该表执行服务器端处理的脚本。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以使用任何语言编写，使用 DataTables 文档中描述的协议。