如何覆盖 Datatables 上的数据？

Question

在模板上，我有一个 websocket 连接，每秒向页面发送数据。 因此，每一秒都会收到一个新的 arrays 数组，如下所示，只是具有不同的值。 我试图在数据表上显示这些数据。 问题是我需要覆盖表上的数据，所以每次我收到一个新数组 arrays 时，表上的先前数据必须用新记录覆盖。

var data = [
[1, 5],
[9, 3],
[71.55, 17],
[1800, 20],
[713, 3],
]

这是我尝试过的：

$.each(data, function(key,value) {
    $('#mytable').append('<tr><td>'+value[0]+'</td><td>'+value[1]+'</td></tr>')
})

这段代码的问题是，虽然它会正确显示数据，但每次我收到一个新数组时，它不会覆盖旧数组，而是只会 append 数据。

我也试过：

$.each(data, function(key,value) {
    $('#mytable').html('<tr><td>'+value[0]+'</td><td>'+value[1]+'</td></tr>')
})

但这是行不通的，因为它只会循环遍历数组并且一次只显示数组的一条记录。

这是表格：

<table id="mytable" class="pos-table table table-striped table-hover">
  <thead>
    <tr>
      <th>RATE</th>
      <th>AMOUNT</th>
    </tr>
  </thead>
</table>

Answer 1

您必须在变量中生成 dataTable，然后销毁它，添加行并再次在变量中创建 dataTable

   tb.destroy();
   // insert rows
   tb=$('#mytable').DataTable();

 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js"></script> </head> <body> <table id="mytable" class="pos-table table table-striped table-hover"> <thead> <tr> <th>RATE</th> <th>AMOUNT</th> </tr> </thead> </table> <button onclick="add();">add</button> </button> <script> var data = [ [1, 5], [9, 3], [71.55, 17], [1800, 20], [713, 3], ] var tb = $('#mytable').DataTable(); $(document).ready(function() { add(); }); function add(table) { tb.destroy(); $.each(data, function(key, value) { $('#mytable').append('<tr><td>' + value[0] + '</td><td>' + value[1] + '</td></tr>') }) tb = $('#mytable').DataTable(); } </script> </body> </html>

如何覆盖 Datatables 上的数据？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-24 17:06:04

如何覆盖 Datatables 上的数据？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-24 17:06:04

解决方案1
0 已采纳 2020-04-24 17:06:04