问题描述
我是第一次在页面加载时从服务器端加载表格中的数据,并使用 dataTables 设置分页和搜索框。此后,我想每 60 秒加载一次 <tbody>
内的数据而不刷新页面。页面第一次加载时,正确应用分页,每60秒动态加载数据时,分页不变,所有行显示在同一页面。
我有一个复杂的表结构,其中每行嵌套一个表。这是我的 <tbody>
结构。
<tr class="d-flex">
<td class="col-0">1</td>
<td class="col-2">5/3/2021,3:10:02 pm</td>
<td class="col-2">C0001_001</td>
<td class="col-8">
<div class="table-responsive col-md-10" style="max-height:250px; overflow-y: scroll;">
<table>
<tr>
<td>Rwt_lvlWtrTnk:3.07</td>
</tr>
<tr>
<td>Rwt_bPmp:false</td>
</tr>
<tr>
<td>Pft_lvlWtrTnk:3.22</td>
</tr>
<tr>
<td>Pft_prFltrUpStrm:0.39</td>
</tr>
<tr>
<td>Pft_currPmp:0</td>
</tr>
<tr>
<td>Pft_stPmp:0</td>
</tr>
<tr>
<td>Pft_bVlvFwd01:false</td>
</tr>
<tr>
<td>Pft_bVlvFwd02:false</td>
</tr>
</table>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-0"></td>
<td class="col-2">5/3/2021,3:09:21 pm</td>
<td class="col-2">C0001_001</td>
<td class="col-8">
<div class="table-responsive col-md-10" style="max-height:250px; overflow-y: scroll;">
<table>
<tr>
<td>Rwt_lvlWtrTnk:3.07</td>
</tr>
<tr>
<td>Rwt_bPmp:false</td>
</tr>
<tr>
<td>Pft_lvlWtrTnk:3.92</td>
</tr>
<tr>
<td>Pft_prFltrUpStrm:0.78</td>
</tr>
<tr>
<td>Pft_currPmp:0</td>
</tr>
<tr>
<td>Pft_stPmp:0</td>
</tr>
<tr>
<td>Pft_bVlvFwd01:false</td>
</tr>
<tr>
<td>Pft_bVlvFwd02:false</td>
</tr>
</table>
</div>
</td>
</tr>
我正在动态地形成如下结构
$(document).ready( function () {
$('#dataMonitorTable').DataTable();
async function updateLatestData() {
await fetch('url')
.then((response) => response.json())
.then((response) => {
var finalJSON = JSON.parse(response.response)
var rows = '';
var j = 1;
$.each(finalJSON.response,function(index,item) {
var date_value = parseInt(item.doc.time);
var tableData = JSON.parse(item.doc.data);
var date = new Date(date_value);
var row = '<tr class="d-flex">';
row += '<td class="col-0">' + j++ + '</td>';
row += '<td class="col-2">' + date.toLocaleString() + '</td>';
row += '<td class="col-2">' + item.doc.NFID + '</td>';
row += '<td class="col-8"><div class="table-responsive col-md-10" style="max-height:250px; overflow-y: scroll;"><table>';
Object.keys(tableData).forEach(function(key) {
row += '<tr><td>'+ key + ':' + tableData[key] +'</td></tr>';
});
row += '</table></div></td>';
rows += row + '</tr>';
});
$('#dataMonitorTable tbody').html(rows);
})
.catch(error => console.error("error",error))
}
setInterval(updateLatestData,60000)
});
如何为动态加载的数据应用分页
任何想法将不胜感激。
解决方法
在代码行之后
$('#dataMonitorTable tbody').html(rows);
您必须重新初始化数据表,以便重置所有数据和分页
$('#yourtableID').DataTable({ });
,
对于每个时间间隔的循环,检查数据表是否处于活动状态,如果是,则销毁该表并在附加表结构后重新初始化。
$(document).ready( function () {
$('#dataMonitorTable').DataTable();
async function updateLatestData() {
await fetch('http://localhost:8080/fetch_all_data')
.then((response) => response.json())
.then((response) => {
// console.log('strings',JSON.stringify(response.response))
var finalJSON = JSON.parse(response.response)
var rows = '';
var j = 1;
$.each(finalJSON.response,function(index,item) {
//console.log("items",item.doc.time)
var date_value = parseInt(item.doc.time);
var tableData = JSON.parse(item.doc.data);
var date = new Date(date_value);
var row = '<tr class="d-flex">';
row += '<td class="col-0">' + j++ + '</td>';
row += '<td class="col-2">' + date.toLocaleString() + '</td>';
row += '<td class="col-2">' + item.doc.NFID + '</td>';
row += '<td class="col-8"><div class="table-responsive col-md-10" style="max-height:250px; overflow-y: scroll;"><table>';
Object.keys(tableData).forEach(function(key) {
row += '<tr><td>'+ key + ':' + tableData[key] +'</td></tr>';
});
row += '</table></div></td>';
rows += row + '</tr>';
});
if ( $.fn.DataTable.isDataTable('#dataMonitorTable') ) {
$('#dataMonitorTable').DataTable().destroy();
}
$('#dataMonitorTable tbody').empty();
$('#dataMonitorTable tbody').html(rows);
$('#dataMonitorTable').DataTable();
})
.catch(error => console.error("error",error))
}
setInterval(updateLatestData,60000)
});