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

---

前言

最近遇到一个需求，需要刷新一个页面上的实时数据显示，最简单的办法当然是在页面头加入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);

---