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

简介: 前端页面使用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中文网

目录
相关文章
|
5天前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
2月前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
118 60
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
15 1
.自定义认证前端页面
|
2月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
2月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
45 18
|
3月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
3月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
3月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
74 4