Bootstrap-table+Ajax 定时刷新表格

最新推荐文章于 2025-09-14 02:46:12 发布

原创最新推荐文章于 2025-09-14 02:46:12 发布 · 1.2k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #html #bootstrap #javascript #c#

本文介绍了如何使用Bootstrap-table结合Ajax实现表格数据的定时刷新。在遇到定时服务无响应，仅首次加载数据的问题后，作者排查了各种Bootstrap-table的内置方法，如直接更新、摧毁重载等，发现由于GET方法的缓存导致请求未发送到服务器。最后通过将请求方式更改为POST解决了问题。

Bootstrap-table+Ajax 定时刷新表格

直接开整：
1.html代码

<body>
    <div class="container-fluid">
        <div class="row" >
            <h1>储丝柜第X组实时状态</h1>
        </div>
        <div class="row">
        // 这张表就是要进行定时刷新的表，id定义为'table'
            <table id="table" style="text-align:center"></table>
        </div>
        <div class="row" >
            <span id="showTime"></span> <span id="showCount"></span>
        </div>
    </div>
</body>

2.js代码

<script type="text/javascript">
		// 初始化数据
        $(function () {
           // 1.第一步，加载表格样式
           $('#table').bootstrapTable({
           		// 1.1 直接加载列，比如下面这样，其他属性暂不设置
                columns: [
                    {
                        field: 'STORAGE_CODE',
                        title: '柜号'
                    }, {
                        field: 'LOT_CODE',
                        title: '批次'
                    }, {
                        field: 'CIG_CODE',
                        title: '牌号'
                    }, {
                        field: 'RY_CODE',
                        title: '红黄牌'
                    }, {
                        field: 'KG_NUM',
                        title: '公斤数'
                    }, {
                        field: 'IN_STORAGE_TIME',
                        title: '入柜时间'
                    }, {
                        field: 'STORE_TIME',
                        title: '存储时间'
                    }, {
                        field: 'STATUS',
                        title: '状态'
                    }
                ]
            });
            // 2.通过Ajax方法初始化表格数据
            initTable();
            // 3.为加载表格数据设置定时服务  30s加载一次
            setInterval(function () {
                initTable();
            }, 1000 * 30);
        })


		// ---------------------------通用方法--------------------------
		// 加载表格数据的方法
        function initTable() {
        	// Ajax请求后台数据
            $.ajax({
                url: "/StorageTest/GetGridJson1",  // MVC控制器下的方法
                type: "POST",		// 一定要用POST,否则传递同样参数只会向服务器请求一次，这样定时加载就没有效果
                dataType: "json", // 接收的数据类型为json
				// data为后台要接收的参数，以下只是例子
                data: {
                    type: "",
                    sort: "",
                    order: ""
                },
                success: function (data) {
                	// 加载成功后，读取数据，为table表格赋值即可
                    $('#table').bootstrapTable('load', data);
                },
            })
        }
    </script>

3.后台接收代码（c#）

 		[HttpPost]   // 该注解意味着该方法只接收post请求
        [HandlerAjaxOnly]  // 只接收Ajax请求
        public ActionResult GetGridJson1(string type, string sort, string order)
        {
            // 调用方法获取数据（自己写的后台方法）
            var data = stba.GetItemList(type, sort, order);
  			// 转化为Json并返回前台
            return Content(data.ToJson());
        }

4.总结
问题：定时服务没效果，只有第一次进入后台
一开始尝试的时候，表格数据能正常显示，但定时服务死活没反应，只能通过页面刷新才能重新进入后台
尝试过bootstrap-table自带方法：
1）.直接更新
$("#table").bootstrapTable('refresh') 没吊用
2）.先摧毁，再加载

	 $("#table").bootstrapTable('destroy');
	 $("#table").bootstrapTable({
	 .........
	 });

依然没吊用
3）.用测试按钮直接通过点击调用Ajax方法，依然没用，
4）.解决方法
a. 因为缓存原因，get方法在传入后台的参数都一样的情况下，不会再次请求服务器，详细参考如下网址：
https://blog.csdn.net/Xth8013/article/details/77896881
b. 将传入和接收的方法都改为POST（本篇文章所用方式），完事