datatable刷新数据，js不整体刷新页面，使用DataTables表格插件定时更新后台数据变化

2023-07-07 06:32| 来源: 网络整理| 查看: 265

文章目录前言一、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({……}）封装成函数

要刷新的区域：

Total Total Items： 0 OverflowID Type MailNum Feeders Detail Total Items：0 FeedID OverflowID Type MailNum

将绘制表格和显示数据的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 RefreshTable('#overflow_table','/show_overflowcount2'); RefreshTable('#overflow_ind_table','/show_overflowcount_ind2'); } 2.4定时间隔执行刷新自动加载函数 //间隔3s执行一次 setInterval(autoLoadDataTable,3000);

【本文地址】

公司简介

联系我们