根据新的对象数据更新 DataTable

编程问答 2022-05-24

问题描述

我在用新值更新数据表时遇到了一些问题。目前，我正在调用一个 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,"All"]],destroy: true,"data": dataObject.data,"columns": dataObject.columns
});

然后生成下表。

enter image description here

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

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

select parmid from parms

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

enter image description here

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

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

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

谢谢！

解决方法

除了销毁表格外，您还需要删除 <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",{ "name": "Garrett Winters","office": "Tokyo" } 
  ],{ title: "Office",data: "office" }
  ]
};
 
var dataObject = dataObjectOne;
var tableSpec = { 
  "dom": 'l<Bf<t>ip>',"lengthMenu": [[10,25,50,-1],[10,"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。

datatablesjquerysqlsql