前端页面使用DataTables无刷新更新数据

前言

不用整体刷新页面，可以定时更新后台数据的变化，本Demo使用了DataTables表格插件
请按照官方文档直接引入相关SDK。。。。 废话不多说了，直接上代码

步骤/相关代码

前端的DIV Box

<div class="row" >
    <table  id="datatables" class="display compact" style="width:90%"></table>
</div>

JS引入渲染

$(document).ready(function () {
    initTableConfig();
    autoLoadDataTable();
    //定时任务
    setInterval(function () {
        autoLoadDataTable();
    },10000)
})


function autoLoadDataTable(){
    //如果有不同的table需要刷新,直接添加不同的URL数据源和不同的ID标签就可以了
    RefreshTable('#datatables', base_url + '/risk/getDatas');
}

//配置DataTables，只是配置，渲染在定时任务的方法里面
function initTableConfig(){
    $('#datatables').DataTable({
        "paging":   false,
        "ordering": false,
        "info":     false,
        //搜索和排序相关参数
        "searching":false,
        "ordering":false,
        columns: [
            {data: 'id' , title:'ID' },
            { data: 'ip' , title:'是否正常', "visible": false},
            {
                data: 'port' ,
                title:'服务地址',
                render: function (data,type,row) {
                    // console.log('data'+data+'type'+type+'row'+row+'rowid'+row.id);
                    var ip = row.ip;
                    var port = row.port;
                    return '<td> '+ip+':'+port+'</td>';
                }
            },
            { data: 'isLined' , title:'是否正常'},
            { data: 'online' , title:'是否在线'},
            { data: 'iafStatus' , title:'IAF状态'},
            {
                // data: 'iafStatus',
                title:'操作',
                render: function (data,type,row) {
                    var ip = row.ip;
                    var port = row.port;
                    return '<td> <button class="btn btn-danger btn-xs"  onclick ="online(this)" style="width:80%"  ip = "'+row.ip+'" port = "'+row.port+'">上线</button></td>';
                }
            }
        ],
    });
}



//刷新数据,方法无须更改可以直接复用
function RefreshTable(tableId, urlData){
    $.getJSON(urlData, null, function( json )
    {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();
        table.fnClearTable(this);//动态刷新关键部分语句，只会根据后台数据有变化才会刷新
        for (var i=0; i<json.length; i++)
        {
            table.oApi._fnAddData(oSettings, json[i]);//注意取得的jason串的字符数量，要与html中列的数量要有对应
        }
        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}

Java提供后端服务，相关测试方法

//controller层一个方法（Spring框架）
    @RequestMapping("getDatas")
    @ResponseBody
    public List<SvcMonitor> getDatas(){
        List<SvcMonitor>  svcMonitorList= new ArrayList<>();
        Random random = new Random();
        for(int i = 1; i<=10; i++){
            SvcMonitor svcMonitor = new SvcMonitor();
            int rndNum = random.nextInt(1000);
            svcMonitor.setId(rndNum+"");
            svcMonitor.setIp("192.68.1."+rndNum);
            svcMonitor.setPort(rndNum+1000+"");
            svcMonitor.setIsLined("正常");
            svcMonitor.setOnline("在线");
            svcMonitor.setIafStatus(rndNum-1+"");
            svcMonitorList.add(svcMonitor);
        }
        return svcMonitorList;
    }

页面效果

参考资料：

Datatables中文网