javascript - 如何将数据表中动态添加的行包含到 DOM 树中，以便它的行为与页面加载时加载的任何其他行一样？

Question

我正在使用数据表来表示我的应用程序中的数据。我有一个功能，可以在单击克隆图标时克隆任何行并动态添加它下面的行。

数据表具有搜索功能，可以搜索表中存在的所有行，但是它只考虑初始页面加载时加载到表中的行。它不考虑新动态添加的克隆行。

如何才能使新添加的行成为表格的一部分，并像任何其他行一样考虑进行搜索。

这是 fiddle

var table = $('#example').DataTable({
  responsive: true,
  "search": {
    "regex": true,
    "smart": false
  },

  "scrollY": "400px",
  "scrollCollapse": true,
  "paging": false
});


$(document).on('click', '.cloneclick', function() {


  var index = $(this).parent().parent().index();

  var clonedElement=$(this).parent().parent().clone(true,true).html();

  clonedElement = "<tr>" + clonedElement + "</tr>";

  $('#example > tbody > tr').eq(index).after(clonedElement);
});

Answer 1

您需要使用 datatable's row.add() method .它会自动更新数据表中的数据并刷新它。

因为您有行，所以使用row().data() 获取数据将非常简单。 :

你的代码应该是这样的:

$(document).on('click', '.cloneclick', function() {
  var clonedElement = table.row($(this).parent().parent()).data();
  table.row.add(clonedElement).draw();
});

这是 a working diddle .