对表格进行动态翻页显示

最新推荐文章于 2023-05-25 17:32:09 发布

原创

最新推荐文章于 2023-05-25 17:32:09 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在网页中对大型表格数据进行动态分页显示，优化用户体验。通过使用JavaScript和CSS，结合后端API，实现表格内容随页面切换加载，有效提高网页加载速度。

 对于在页面上有多个table展示，需要对table进行定时翻页展示

function scrollTable(tableHtml){//tableHtml传过来的tbody
    	var pagesize = 14;//table展示的行数
    	var pageNo = 1;//当前页数
    	var totalPage = 0;//总页数
    	var rows = 0;//总行数
    	if(tableHtml.children("tr") != undefined || tableHtml.children("tr") != null){
    		rows = tableHtml.children("tr").length;
    	}
    	//当总行数大于每页展示的行数时，开始分页显示
    	if(rows > pagesize){
			if(rows/pagesize > parseInt(rows/pagesize)){
				totalPage = rows/pagesize + 1;
			}else{
				totalPage = rows/pagesize;
			}
			//多执行一次是为了setInterval方法能够立即执行
			if(totalPage > pageNo){
				for(var i = (pageNo-1)*pagesize;i < pageNo*pagesize;i++){
					tableHtml.find("tr").eq(i).show();
				}
				pageNo++;
			}else if(totalPage == pageNo){
				for(var i = (pageNo-1)*pagesize;i < totalPage;i++){
					tableHtml.find("tr").eq(i).show();
				}
				pageNo++;
			}else{
				pageNo = 1;
				for(var i = (pageNo-1)*pagesize;i < totalPage;i++){
					tableHtml.find("tr").eq(i)