DataTables

最新推荐文章于 2018-07-09 10:20:11 发布

litoujkl

最新推荐文章于 2018-07-09 10:20:11 发布

阅读量304

点赞数

分类专栏：前端文章标签： dataTables ajax cannot reinitialise

本文链接：https://blog.csdn.net/litoujkl/article/details/79100065

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【需求】：点击不同链接，使DataTables加载不同的数据，并定时拉取最新数据

本文适用 jquery.dataTables.min.js 版本： 1.9.4 ；其它几个js：

jquery-2.0.3.min.js

fnReloadAjax.js 下载

HTML

<a href="#" id="1" class="cluster">rmqdev-1</a>
<a href="#" id="2" class="cluster">rmqdev-2</a>

<table id="sample-table-2">
  <thead>
    <tr>
      <th>#</th>
      <th>Node name</th>
      <th>IP</th>
      <th>File descriptors</th>
      <th>Socket descriptors</th>
      <th>Erlang processes</th>
      <th>Memory</th>
      <th>Disk space</th>
    </tr>
  </thead>
</table>

<script type="text/javascript">

    var table;

    $('.cluster').click(function () {
        var cluster_id = $(this).attr("id");
        listNode(cluster_id);
    });


    jQuery(function ($) {
        setInterval(function () {
            if ($.fn.dataTable.fnIsDataTable(document.getElementById('sample-table-2'))) {
                table.fnReloadAjax();
            }
        }, 3000);
    });

    function listNode(cluster_id) {
        if ($.fn.dataTable.fnIsDataTable(document.getElementById('sample-table-2'))) {
            table = $('#sample-table-2').DataTable();
            table.fnDestroy(false);
        }
        table = $('#sample-table-2').DataTable( {
            "bProcessing": true,
            "sAjaxSource": "/node/list?cluster_id=" + cluster_id
        } );
    }
</script>

后台返回JSON样例

{
  "aaData": [
    [
      "1",
      "xxx.com",
      "10.30.237.112",
      "2001",
      "1539",
      "30295",
      "2GB",
      "79GB"
    ],
    [
      "2",
      "yyy.com",
      "10.30.237.113",
      "667",
      "217",
      "15705",
      "2.5GB",
      "50GB"
    ],
    [
      "3",
      "zzz.com",
      "10.30.237.114",
      "655",
      "205",
      "17653",
      "3GB",
      "100GB"
    ]
  ]
}