文章目录
- 前言
- 一、meta的http-equiv属性
- 二、使用DataTables表格插件
- 2.1.整体思路
- 2.2.将$('#myTableId').DataTable({……}）封装成函数
- 2.3刷新表格数据函数
- 2.4统一调用刷新表格的自动加载函数
- 2.4定时间隔执行刷新自动加载函数
前言
最近遇到一个需求，需要刷新一个页面上的实时数据显示，最简单的办法当然是在页面头加入meta的http-equiv属性，这样是最简单的，但是这样的话页面每次刷新的时候会闪一下，体验感不是特别好，现在就只想更新一个表格中的数据而不是刷新整个页面。
一、meta的http-equiv属性
如果是刷新整个页面的话，使用下面这种方法是最简单的一行便可以搞定。
＜meta http-equiv=”Refresh” content=”10”＞
或者：
＜meta http-equiv=”Refresh” content=”10；URL=http://www.baidu.com/”＞
其中的10是指停留10秒钟后自动刷新，如果有URL，则自动刷新到该地址。
二、使用DataTables表格插件
2.1.整体思路
找了一些关于表格刷新的办法，这个不像刷新页面那样修改一下属性就可以，这个处理起来要复杂一些。
有的文章说使用：
$("#myTableId").dataTable( ).api().ajax.reload();
//或者
$('#myTableId').dataTable().ajax.reload();
但是这样使用会报错：DataTables warning (table id = ‘myTable’): Cannot reinitialise DataTable，这是因为DataTables重复初始化，Datatables 不允许多次初始化同一表格。虽然这个提示只是起告知作用，不会造成表格功能失效，但是会跳出这个错误提示的弹框
我们需要先清空datatable中原先的数据，再调用datatable，需要使用
$("#myTableId").dataTable().fnDestroy();
或者
if($.fn.dataTable.isDataTable(myTableId)){
var table = $(myTableId).DataTable();
table.clear();
table.rows.add(data).draw();
} else {
$(myTableId).DataTable(data);
}
我试了一下这个方法不起作用，而且这个也无法实现定时刷新的功能。
在js中想要定时执行某个函数是比较简单的，使用：
//定时任务，10000代表间隔10s执行一次
setInterval(Myfunction,10000)
现在的思路是：
1、先将$(‘#myTableId’).DataTable({……}）封装成函数；
2、写一个刷新表格的函数，传入的参数是myTableId和要获取的数据源的URL，这样可以在刷新多个表格的时候传入对应的参数即可
3、写一个自动加载表格的函数，把要刷新的函数放进去
4、定时执行自动加载表格的函数
可能这里理解起来有点麻烦，看代码好理解一点
2.2.将$(‘#myTableId’).DataTable({……}）封装成函数
要刷新的区域：
<div class="page-container">
<div class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l "><strong id="total">Total</strong> </span>
<span class="r"><span id="totalitems">Total Items：</span>
<strong id="total-num">0</strong> </span>
</div>
<div class="mt-20">
<table id="overflow_table" class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
<thead>
<tr class="text-c">
<th width="40">OverflowID</th>
<th width="100">Type</th>
<th width="100">MailNum</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="page-container">
<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"> <strong id="feedersdetail">Feeders Detail</strong></span> <span class="r"><span id="totalitems1">Total Items：</span><strong id="total-num1">0</strong> </span> </div>
<div class="mt-20">
<table id="overflow_ind_table" class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
<thead>
<tr class="text-c">
<th width="40">FeedID</th>
<th width="40">OverflowID</th>
<th width="100">Type</th>
<th width="100">MailNum</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
将绘制表格和显示数据的dataTable封装成函数
需要在页面加载的时候就显示一次，需要在初始化时调用一次该函数：
$(document).ready(function() {
initTableConfig();
});
function initTableConfig(){
$('#overflow_table').dataTable({
"aaSorting": [[0, "asc"]],//默认第几个排序
"bStateSave": true,//状态保存
"pading": false,
"searching:": false,
"lengthChange": false,
"paging": false,
"retrieve":true,//20230628
"aoColumnDefs": [
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
//{"orderable":false,"aTargets":[10]}// 不参与排序的列
{ "title": th_overflowid, "targets": 0},
{ "title": th_type, "targets": 1},
{ "title": th_nummail, "targets": 2}
],
"language":{url:"/globallabel/datatable_label.json"},
"ajax": {
url: "/show_overflowcount",
dataSrc: ''
},
"initComplete": function (settings, json) {
$('#total-num').html(json.length);
},
"columns": [
{"data": "overflowid"},//id
{
"data": "overflowid",
"render": function (data) {
if (data == "0") return th_goodread;//"Good Read";
else if (data == "1") return th_nochute;//"No Chute in Solution";
else if (data == "2") return th_overmax;//"Over Max Circles";
else if (data == "3") return th_lost;//"Lost";
else if (data == "4") return th_multbar;//"Multiple Barcodes";
else if (data == "5") return th_nodest;//"No Destination";
else if (data == "6") return th_ipuovertime;//"IPU Overtime";
else if (data == "7") return th_vcsovertime;//"VCS Operater Overtime";
else if (data == "8") return th_vcsqueueot;//"VCS Queue Overtime";
else if (data == "9") return th_vcsrejected;//"VCS Rejected";
else if (data == "10") return th_noread;//"NO Read";
else if (data == "11") return th_mesrejected;//"MES Rejected";
else if(data =="100") return th_all;
else if(data=="22") return "撤单邮件";
else if(data=="23") return "多次往返";
else return data;
}
},
{"data": "nummail"}
]
});
$('#overflow_ind_table').dataTable({
"aaSorting": [[0, "asc"]],//默认第几个排序
"bStateSave": true,//状态保存
"pading": false,
"retrieve":true,//20230628
"destory":true,//20230628
"aoColumnDefs": [
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
//{"orderable":false,"aTargets":[10]}// 不参与排序的列
{ "title": th_feedid, "targets": 0},
{ "title": th_overflowid, "targets": 1},
{ "title": th_type, "targets": 2},
{ "title": th_nummail, "targets": 3}
],
"language":{url:"/globallabel/datatable_label.json"},
"ajax": {
url: "/show_overflowcount_ind",
dataSrc: ''
},
"initComplete": function (settings, json) {
$('#total-num1').html(json.length);
},
"columns": [
{"data": "inductionid"},//id
{"data": "overflowid"},
{
"data": "overflowid",
"render": function (data) {
if (data == "0") return th_goodread;//"Good Read";
else if (data == "1") return th_nochute;//"No Chute in Solution";
else if (data == "2") return th_overmax;//"Over Max Circles";
else if (data == "3") return th_lost;//"Lost";
else if (data == "4") return th_multbar;//"Multiple Barcodes";
else if (data == "5") return th_nodest;//"No Destination";
else if (data == "6") return th_ipuovertime;//"IPU Overtime";
else if (data == "7") return th_vcsovertime;//"VCS Operater Overtime";
else if (data == "8") return th_vcsqueueot;//"VCS Queue Overtime";
else if (data == "9") return th_vcsrejected;//"VCS Rejected";
else if (data == "10") return th_noread;//"NO Read";
else if (data == "11") return th_mesrejected;//"MES Rejected";
else return data;
}
},
{"data": "nummail"}
]
});
}
2.3刷新表格数据函数
代码如下（示例）：
//刷新数据
function RefreshTable(tableId, urlData){
$.getJSON(urlData, null, function(json )
{
table = $(tableId).dataTable();
oSettings = table.fnSettings();
//table.fnClearTable(this);
table.fnClearTable();//动态刷新
for (var i=0; i<json.length; i++)
{
table.oApi._fnAddData(oSettings, json[i]);//注意取得的jason串的字符数量，要与html中列的数量要有对应
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table.fnDraw();
});
}
2.4统一调用刷新表格的自动加载函数
function autoLoadDataTable(){
RefreshTable('#overflow_table','/show_overflowcount2');
RefreshTable('#overflow_ind_table','/show_overflowcount_ind2');
}
2.4定时间隔执行刷新自动加载函数
//间隔3s执行一次
setInterval(autoLoadDataTable,3000);
