添加带附加的行后，数据表方法无法正常工作

Ive got a problem to solve. With .append() I do add new rows which have input fields. But the problem is, that after appending new rows no methods work on them. No methods like search, responsive button etc.

我有一个问题需要解决。使用.append()我会添加具有输入字段的新行。但问题是,在追加新行之后,没有方法可以对它们起作用。没有像搜索,响应按钮等方法。

I tried a lot but I couldnt figure it out...After clicking on a button a new Row gets added to the #table.

我尝试了很多,但我无法弄清楚...点击按钮后,新的行被添加到#table。

var poAddRowTable = $('#table').DataTable();
$('button').on('click', function () {
    addRowFunc(true)
});

addRowFunc = function () {
    var previousRow = $('#table tr:last');
    var newRow = $(previousRow).clone(true, true);

    $('#table tbody').append(newRow);
    $("html, body").scrollTop($(document).height());
}

2 个解决方案

#1

You should consider to use DataTable.row.add() for adding a new row to the data table.
Your addRowFunc should be updated like this

您应该考虑使用DataTable.row.add()向数据表添加新行。你的addRowFunc应该像这样更新

addRowFunc = function () {

    // Clone data from last row
    var lastRow = $('#table tr:last');
    var newRowdata = [];
    $('#table tr:last').find('td').each(function() {
        newRowdata.push($(this).text());
    }); 

    // Add new row to table
    poAddRowTable.row.add(newRowdata).draw();

    $("html, body").scrollTop($(document).height());
}

#2

I guess you have to refresh your table after appending, the following link can help :

我想你必须在追加后刷新你的表,以下链接可以帮助:

How to refresh a simple Datatables table when adding new rows with jQuery

使用jQuery添加新行时如何刷新简单的Datatables表

#1