如何使用 DataTables、Ajax 调用和 Json 响应重新加载 table 数据？

Question

我有一个通过 Thymeleaf 生成的 table。我想使用 jQuery.

刷新 table 的内容

    <table class="table table-hover" id="main-table">
        <thead class="thead-inverse">
            <tr>
                <th class="col-md-2 text-center">Network Id</th>
                <th class="col-md-2 text-center">Rep date</th>
                <th class="col-md-2 text-center">Hashrate [KH/s]</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="networkHashrate : ${networkHashrates}" th:onclick="'javascript:openPoolModal(\''+ ${networkHashrate.id} + '\');'">
                <td class="text-center" id="hashrateId" th:text="${networkHashrate.id}"> Sample id</td>
                <td class="text-center" id="repDate" th:text="${@findAndDisplayDataService.formatDate(networkHashrate.repDate)}">Sample rep-date</td>
                <td class="text-center" id="hashrate" th:text="${@findAndDisplayDataService.formatHashrate(networkHashrate.hashrate)}">Sample hashrate</td>
            </tr>
        </tbody>
    </table>

我想出了这样的功能，每 8 秒更新一次 table 内容：

$(document).ready(function() {
var table = $('#main-table').DataTable({
           ajax: {
                url: '/refresh',
                dataSrc:''

            },
           paging: true,
           lengthChange: false,
           pageLength: 20,
           stateSave: true,
           info: true,
           searching: false,
           "aoColumns": [
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "desc", "asc" ] }
           ],
           "order": [[ 0, "asc" ]]
});


setInterval(function(){
table.ajax.reload();
}, 8000);
});

这是 JSON 回复：

[{  
  "id":1,
  "repDate":{  
     "offset":{  },
     "nano":880042000,
     "year":2018,
     "monthValue":4,
     "dayOfMonth":25,
     "hour":12,
     "minute":58,
     "second":53,
     "month":"APRIL",
     "dayOfWeek":"WEDNESDAY",
     "dayOfYear":115
  },
  "hashrate":5114926.0
},...more entries
]

打印出空的 table，我不断收到错误消息：

Uncaught TypeError: Cannot read property 'reload' of undefined

还有一个警告弹出窗口说：

Data Tables warning: table id=main-table - Requestem unknown parameter '0' for row 0 column 0. For more information about this error, please see: http://datatables.net/tn/4

编辑

我将 table 声明移到了函数之外。现在我只是不断收到警告。

编辑 2

我按照你说的做了，数据一直在刷新，但问题还是很少。

首先，我的 stateSave: true 属性停止工作，所以当 table 重新加载时，它总是回到第一页。
其次，我丢失了所有样式（例如 class="text:center"）和 on:click 属性，它们最初在我的 html 文件中。

Answer 1

尝试在 $(document).ready 之前声明 table :

var table;
$(document).ready(function() {
  table = $('#main-table').DataTable({"serverSide": true, ...})
  setInterval(function(){
     table.ajax.reload();
   }, 8000);
})

错误与您的列定义有关，请尝试以这种方式定义列：

 "columnDefs": [
                    {
                        "targets": 0,
                        "data": "id",
                    },
                    {
                        "targets": 1,
                        "data": "repDate",
                    },
                    {
                        "targets": 2,
                        "data": "repDate",
                    }
                ]

如何使用 DataTables、Ajax 调用和 Json 响应重新加载 table 数据？

How to reload table data using DataTables, Ajax call & Json response?

javascript

ajax

json

datatables

reload