表格翻页显示实时刷新的数据

最新推荐文章于 2022-10-23 22:58:27 发布

YLiu77

最新推荐文章于 2022-10-23 22:58:27 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签：表格翻页实时刷新

本文链接：https://blog.csdn.net/YLiu77/article/details/88812440

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一般的表格翻页可通过bootstrap的轮播组件或者其他的插件来实现，这样显示的数据是页面加载完成后，通过接口从后台获取的数据，将数据直接显示到页面上。当后台数据改变，如果需要显示改变后的数据，需要在客户端的浏览器手动刷新页面来查看；如果直接对功能代码设置setInterval函数来定时刷新页面，每次刷新后都将从表格的第一页显示，就会出现当上次的表格还没显示完所有的页面，定时刷新后又从表格的第一页开始显示的问题。

为了解决以上问题，我个人做了以下调整。通过设置参数index来控制刷新后显示哪一页，获取每次刷新后的总页数，当index不大于刷新后的总页数，每次刷新index+1，就显示下一页，当index大于刷新后的总页数，每次刷新index的值为(index + 1) % totalPage，从之前的页数显示。这样就能达到表格下一页一直显示实时刷新的数据。代码如下：

//实时刷新模块数据
setTimeout(function fn() {
	stopCrane();
	setTimeout(fn, 2000);
}, 2000);
var index = -1; //每次刷新需要显示的页号
function stopCrane() {
	$.ajax({
		url: iUrl + '/LayoutData/ArmPauseList',
		type: 'get',
		datatype: 'json',
		success: function(data) {
			var cranceList = data;
			var len = cranceList.length;
			var cHtml = '';
			var size = 5; //每页显示的数据条数
			
			if (len > 0) {
				var totalPage = 0; //总页数
				if (len / 5 > parseInt(len / 5)) {
					totalPage = parseInt(len / 5) + 1;
				} else {
					totalPage = parseInt(len / 5);
				}
				index = (index + 1) % totalPage;
				var list = DisCurrent(index, size, cranceList);
				for (var i = 0; i < list.length; i++) {
					cHtml += '<tr>' +
						'<td>' + list[i].cranceName + '</td>' +
						'<td>' + list[i].carID + '</td>' +
						'<td>' + list[i].realSendVolume + '</td>';
					if (list[i].status == true) {
						cHtml += '<td>锁定</td>';
					} else if (list[i].status == false) {
						cHtml += '<td>正常</td>';
					}
					cHtml += '<td>' + list[i].stopReason + '</td>' +
						'</tr>';
					$('#stopCraneTable').find('tbody').empty().append(cHtml);
				}
			} else {
				cHtml += '<div class="tab-none">暂无数据</div>';
				$('#stopCraneTable').parent().parent().children(".tab-none").remove();
				$('#stopCraneTable').parent().parent().append(cHtml);
			}
		}
	});
}
/* 表格翻页显示数据 */
function DisCurrent(index, size, cranceList) {
	var list = new Array();
	var j = 0;
	for (var i = (index) * size; i < (index + 1) * size; i++) {
		if (i < cranceList.length) {
			list[j] = cranceList[i];
			j++;
		}
	}
	return list;
}