gpt4 book ai didi

javascript - 如何使用 DataTables、Ajax 调用和 Json 响应重新加载表数据?

转载 作者:行者123 更新时间:2023-12-01 02:06:48 26 4
gpt4 key购买 nike

我有一个通过 Thymeleaf 生成的表。我想使用 jQuery 刷新表的内容。

    <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 秒更新一次表内容:

$(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
]

打印一个空表,但我不断收到错误:

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
<小时/>

编辑

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

<小时/>

编辑2

我按照你说的做了,数据不断刷新,但是还是有一些问题。

首先,我的 stateSave: true 属性停止工作,因此当重新加载表格时,它总是返回到第一页。
其次,我丢失了最初位于我的 html 中的所有样式(例如 class="text:center")和 on:click 属性文件。

最佳答案

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

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",
}
]

关于javascript - 如何使用 DataTables、Ajax 调用和 Json 响应重新加载表数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50040030/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com