首页 文章

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

提问于
浏览 次
1

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

enter image description here

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

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

EDIT

当我创建表时，我使用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'));
});
jquery datatables

1 回答

  • 1

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

    $(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内部节点上工作 . 您可以在"pure" 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可以改进 . 您正在插入 data-initial n次（对于每列）您只需要

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

相关问题