使用以下命令可以很容易地将新行添加到DataTable中: row.add()DT
API 方法。只需调用API函数
以及将用于新行的数据(它是数组还是对象)。可以添加多行
using the rows.add()DT
方法(请注意复数)。
请注意,为了查看表格中的新行,您必须调用 draw()DT
方法,这很容易通过
DataTables API 使用的链接。
此示例显示每次单击下面的按钮时将添加一行。
第1栏 | 第2栏 | 第三栏 | 第4栏 | 第5栏 |
---|---|---|---|---|
第1栏 | 第2栏 | 第三栏 | 第4栏 | 第5栏 |
下面显示的Javascript用于初始化此显示的表 example:
$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw();
counter++;
} );
// Automatically add a first row of data
$('#addRow').click();
} );
除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:
下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:
除了从库中加载的内容外,此示例还使用了一些其他CSS 文件(如下),以便正确显示表格。显示了使用的其他CSS below:
加载以下CSS库文件以供本示例使用,以提供 table:
该表通过Ajax加载数据。下面显示了已加载的最新数据。这个数据 将在加载任何其他数据时自动更新。
下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.