根据新的对象数据更新 DataTable答案

【问题标题】：Update DataTable based on new object data根据新的对象数据更新 DataTable
【发布时间】：2021-02-23 19:29:31
【问题描述】：

我在使用新值更新数据表时遇到了一些问题。目前，我正在调用一个返回特定查询的列和行的 API。然后我将该信息输入数据表（见下文）。

示例：select * from parms

{columns: Array(4), data: Array(3)}

从查询返回的 4 列和 3 行。我现在将它输入到数据表的 data 和 columns 属性中（如下）。

<table class="table table-sm table-bordered table-striped bg-white" id="QueryResults"></table>

$('#QueryResults').dataTable({
  dom:'l<Bf<t>ip>',
  lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
  destroy: true,
  "data": dataObject.data,
  "columns": dataObject.columns
});

然后生成下表。

如果它是实例化时的初始查询，这一切都很好。但是，具有不同列数的每个后续查询都无法正确显示或数据表无法正常工作。

假设我从该表中选择了 *，但现在我只想查看 PARMID。

select parmid from parms

现在在完成上述查询后执行此查询，显示如下表：

即使查询只返回一列：{columns: Array(1), data: Array(3)}

我确实认为我必须在创建新表之前销毁表。但是在我这样做之后，我不能再创建一个表，因为 div 已从 DOM 中删除。能够使用数据表做到这一点应该很容易，但我在他们的文档站点上找不到我要查找的内容。我希望数据表能够根据 API 调用返回的新数据自动更新。

我无法指出我做错了什么。任何帮助将不胜感激。

谢谢！

【问题讨论】：

标签： jquery sql datatables

【解决方案1】：

除了销毁表之外，您还需要删除 <html> 元素中的所有内容。

此演示使用一个按钮在两个不同的数据源之间切换，具有不同的行数和列数。

切换按钮和表格：

<div style="margin: 20px;">
    <button id="toggler" type="button">Toggle Data</button>
    <br><br>
    <table id="example" class="display dataTable cell-border" style="width:100%"></table>
</div>

DataTables 脚本和按钮点击事件：

<script>

var dataObjectOne = {
  data: [ 
    { "name": "Airi Satou", "position": "System Architect", "salary": "$320,800" },
    { "name": "Bruno Nash", "position": "Accountant", "salary": "$170,750" } 
  ],
  columns: [ 
    { title: "Name", data: "name" },
    { title: "Position", data: "position" },
    { title: "Salary", data: "salary" }  
  ]
};

var dataObjectTwo = {
  data: [ 
    { "name": "Tiger Nixon", "office": "Edinburgh" },
    { "name": "Cedric Kelly", "office": "Edinburgh" },
    { "name": "Garrett Winters", "office": "Tokyo" } 
  ],
  columns: [ 
    { title: "Name", data: "name" },
    { title: "Office", data: "office" }
  ]
};
 
var dataObject = dataObjectOne;
var tableSpec = { 
  "dom": 'l<Bf<t>ip>',
  "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
  "data": dataObject.data, 
  "columns": dataObject.columns
};
  
$(document).ready(function() {
 
  var table = $('#example').DataTable( tableSpec );

  const button = document.querySelector('button');

  button.addEventListener('click', event => {
    dataObject = (dataObject === dataObjectOne) ? dataObjectTwo : dataObjectOne;
    
    table.destroy();
    
    // Force the removal of table contents (thead, tbody):
    document.getElementById("example").innerHTML = '';
    
    // load the new row and column data
    tableSpec.data = dataObject.data;
    tableSpec.columns = dataObject.columns;
    
    table = $('#example').DataTable( tableSpec );    
  });

} );

</script>

为了避免必须两次定义 DataTable 选项，我将它们全部声明在一个变量 tableSpec 中。然后我可以将我的两个数据源中的任何一个放入这个tableSpec。

【讨论】：

我想我见过一个例子，其中动态数据（不同的行/列大小）是通过 DataTables ajax 选项获取的——因此它直接加载到表中（不需要外部变量）。如果我记得，在这种情况下，没有必要在随后的 ajax 重新加载时销毁表。如果我能找到这个例子，我会链接到它。这可能是一种不那么繁琐的方法（如果我没记错的话——也许我找不到它是有原因的……）。