有没有办法在dataTables中连续更新数据？

Question

我正在使用Jquery和dataTables在表格中显示一些内容。一切正常但现在我需要能够在按钮点击时更新特定的行。 为了清楚起见，我附上了一个截图：

当用户按下“取消”按钮更新此行的值时，我需要。现在我将值存储为<tr>元素中的数据属性 我能够得到它们，但我需要找到一种优雅的方式来应用更新。

数据表是否为此提供了一些功能？

修改

当我创建表时，我使用createdRow事件，以便将此特定元素的值保存为数据属性。

// add data using DataTable lib
var layer_data = $("#layer_data").DataTable({
  "scrollX": true,
  "aaData":whole_array,
  "iDisplayLength": 10, // display 10 rows on each page
  // on createdRow add data-initial attribute with the data of the row
  "createdRow": function ( row, data, index ) {
    $.each($('td', row), function (colIndex) {
        $(this).parent().attr('data-initial', data);
    });
  }
});

稍后我使用on click事件（单击取消按钮时）。我检索存储在data属性中的值。我需要将这些值放回行的单元格中。

// functionality to cancel edits
$(document.body).on("click", "._cancel_btn",function(e){
  console.log($(this).closest('tr').attr('data-initial'));
});

Answer 1

我认为这是直截了当的。您已在initial-data上存储了一个字符串数组作为<tr>属性，这些值应填充到行列中：

$(document.body).on("click", "._cancel_btn",function(e) {
  var row = $(this).closest('tr'),
      data = row.attr('data-initial').split(',')

  for (var i=0; i<data.length; i++) {
    table
     .row(row)
     .nodes()
     .to$()
     .find('td:nth-child('+ (i+1) +')') //css indexes is 1-based
     .text(data[i])
  }
})

以上工作直接在dataTables内部节点上进行。您可以在“纯”jQuery中执行相同操作，然后在invalidate()行：

之后执行相同操作

for (var i=0; i<data.length; i++) {
  $('td:nth-child('+(i+1)+')', row).text(data[i])
}
layer_data.row(row).invalidate()

BTW可以createdRow得到改善。您只需插入data-initial n 次（对于每列）

createdRow: function ( row, data, index ) {
  $(row).attr('data-initial', data);
}