间隔重新加载数据表答案

【问题标题】：Reload datatable on interval间隔重新加载数据表
【发布时间】：2017-08-04 17:32:44
【问题描述】：

我每 1 分钟刷新一次页面，以保持数据新鲜。我需要摆脱这一点，最后让数据表重新加载而不是刷新浏览器。

从我的 $.post 开始：

$.post('api/displayQnams.php', function(data)
{
  var table = $('example1').DataTable();
  table.clear();
  table.search('').draw();
  var obj = JSON.parse(data);   
  obj.forEach(function(item)
  {
    table.row.add([item.bkgname, item.quote, item.date, item.urgent]) 
  });
  table.draw();

  setInterval(function()
  {
    table.draw();
    console.log('test'); 
  }, 10000); // 10 second interval
});

上面的代码工作正常。 DataTable 打印到页面没有问题。

现在，在 $.post 上方，我设置了 DataTable。我不确定这是否是设置 DataTable 的最佳方式，但它确实提供了我需要的结果。

$(function()
{
  $('#example1').DataTable({
    "dataType": "json", 
    "iDisplayLength": 25,
    "order": [[ 6, "desc" ]],
    "scrollY": 550,
    "scrollX": true,
    "bDestroy": true,
    "stateSave": true
  });
});

还有一些 DataTable 样式，但我想保持简短。

回到我的第一段代码，我将间隔设置为 10 秒。我可以看到控制台每 10 秒打印一次“测试”，但表格没有重新加载。

为了让 DataTable 每 10 秒重新加载一次，我缺少什么？

编辑

这是表格的样子：

<table id="example1" class="table table-bordered table-hover table-condensed">
<thead>
<tr>
  <th>column1</th>
  <th>column2</th>
  <th>column3</th>
</tr>
</thead>
<tbody>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>
</table>

【问题讨论】：

标签： javascript jquery json datatable datatables

【解决方案1】：

不要这样做row.add 使用 ajax 并定义您的列：

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "scripts/post.php",
            "type": "POST"
        },
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

然后在区间使用：

table.ajax.reload();

【讨论】：

尝试了您的建议。我收到“TypeError：c is undefined”错误，它指向 datatables.min.js 文件。想法？
您需要表格标题。 <thead>
第 1 列第 2 列

【解决方案2】：

您没有在 setInterval 回调函数中调用 $.post('...')。

查看您的代码：在 setInterval 回调中，您正在调用 table.draw() console.log('test')

因此，您只获取一次数据，并且只重绘相同的数据...

编辑：如果您在 DevTools 中检查您的网络请求选项卡，您应该只注意到一个 ajax 请求

【讨论】：