Datatable pagination on newly added rows

Question

I am using datatable plugin for table pagination. It works fine with pre-loaded table ( here ).

But the problem is when I am adding new rows through jquery . Since there is no page lad while adding the new rows, pagination doesn't seem to be applied for the table.

You can click on the ' add new row ' button to insert more rows.

Here is the demo

Answer 1

The correct way to add a row in a datatable

Store your datatable in a variable 存储在变量中

var table = $('#example').DataTable();

Declare an array which later inserted in your datatable as new row 声明一个数组，该数组随后作为新行插入到数据表中

var tds = [];

Push each td value in your tds as your row column 按您的每个TD值tds为您的行列

tds.push($(this).html());

insert your new data in the datatable 将新数据插入数据表

table.row.add(tds).draw( false );

So your final javascript code will be like this

var table = $('#example').DataTable();
$("#insert-more").click(function () {
     $("#example").each(function () {
         var tds = [];
         jQuery.each($('tr:last td', this), function () {
             tds.push($(this).html());
         });
         table.row.add(tds).draw( false );
     });
});