前端开发-Bootstrap-table定时更新

最新推荐文章于 2024-07-20 15:49:14 发布

_Always_

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量974

点赞数 1

分类专栏：前端文章标签： Bootstrap-table 表格前端动态数据 ajax

本文链接：https://blog.csdn.net/slyslyme/article/details/82845287

版权

前端专栏收录该内容

31 篇文章 2 订阅

订阅专栏

var app = {};
    app.timeTicket = setInterval(function(){
       
        $.ajax({
            type : 'POST',
            url : "/",
            dataType:"json",
            data:{'host': host_ip},
            success : function (msg) {
                $('#table').bootstrapTable('removeAll');
                $('#table').bootstrapTable('load', msg);
            },
            error:function(msg){
                alert("table-error");
            }
        });
    },2000);

<!--表格-->
    function getData_table(){
        $("#table").bootstrapTable({
        ajax:ajaxReqDate,
        striped: true,
        pagination: true,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        search: true,                      //是否显示表格搜索
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        strictSearch: true,
        showColumns: true,                  //是否显示所有的列（选择显示的列）
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 1,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        columns : [
            {
                field: 'username',
                title: '用户名'
            }, {
                field: 'intercept',
                title: '日志类型'
            }, 
                ···
                ···
            ],
    });
    }
    function ajaxReqDate(result){
            console.log(result);
            $.ajax({
            type : 'POST',
            url : "/",
            contentType: "application/json;charset=utf-8",
            dataType:"json",
            data:{'host': host_ip},
            success : function (msg) {
                result.success({
                    row:msg
                });
                $('#table').bootstrapTable('removeAll');
                $('#table').bootstrapTable('load', msg);
            },
            error:function(msg){
                alert("table_error");
            }
        });
    }

要注意的是每次都要清除数据然后加载新的数据，不然数据只在界面第一次加载时从后台获取数据。