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

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

时间：2018-12-28 02:02:21

文章目录

前言一、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=/”＞

其中的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();});

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');}