js分页显示

最新推荐文章于 2022-11-28 00:44:04 发布

上官天夜

最新推荐文章于 2022-11-28 00:44:04 发布

阅读量827

点赞数

CC 4.0 BY-SA版权

分类专栏： js模版文章标签： js分页 js分页页码 js分页样式

本文链接：https://blog.youkuaiyun.com/zhangminemail/article/details/79726552

js模版专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在HTML页面中使用JavaScript实现分页显示，包括HTML结构、JS代码的引用和封装，以及与后台接口的交互，展示了js分页页码和样式的设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.HTML页面中代码如下

<div class="page">
    	
    </div>

2.HTML中js代码引用

<script src="js/jquery.min.js"></script>
<script src="js/model.js"></script>
<script src="js/page.js"></script>

<script type="text/javascript">
	
	$(function() {
		// 初始化信息
		paginate.use(1, 5);
		page(1);
	});
	
	// 初始化变量
	var url = model.bhost + "api/article/list.ht?type=1";
	var template = $("#list_info").html();
	
	/**翻页 */
	function page(page){
		paginate.goPage({url:url,template:template,contaner:".cbp_tmtimeline",page:page});
	}
	
</script>

3、js抽出文件

var paginate={
		curPage:1,
		totalPage:0,
		pageSize:5,
		pageHtml:'<a href="javascript:page(${num})">${dpy}</a>', // 页码html模板
		totalHtmlBefore:'  <a title="Total record"><b id="total_num">',//总页数html
		totalHtmlAfter:'</b></a>',
		use:function(_curPage,_pageSize){
			this.curPage = _curPage;
			this.pageSize = _pageSize;
		},
		// 展示分页信息
		showPage:function(maxPage, start, curPage){
			// 清空分页信息
			$(".page").html("");
			// 加载分页信息
			var list = paginate.createPageData(maxPage, start);
			model.loaderList(list, this.pageHtml, ".page");
			// 显示总页数
			$(".page").append(this.totalHtmlBefore + curPage+"/" +this.totalPage + this.totalHtmlAfter);
			// 显示当前页样式
			$(".page a").css("color","#aee1ff");
			$(".page a[href='javascript:page("+this.curPage+")']").css("color","#FF0000");
			
		},
		// 创建页码数据列表
		createPageData:function(curPage, start){
			var numList = [];
			numList.push(paginate.createObj(-1));
			for(var i=start; i<=curPage; i++){
				var numObj = paginate.createObj(i);
				if(numObj != null)
				numList.push(numObj);
			}
			numList.push(paginate.createObj(-2));
			return numList;
		},
		// 创建页码数据
		createObj:function(i){
			var numObj = {};
			if(i == -2){
				numObj.num = "-2";
				numObj.dpy = ">";
			}else if(i == -1){
				numObj.num = "-1";
				numObj.dpy = "<";
			}else{
				numObj.num = i+"";
				numObj.dpy = i+"";
			}
			return numObj;
		},
		getCurPage:function(page){
			
			if(page == "-2"){
				paginate.curPage = paginate.curPage +1;
			}else if(page == "-1"){
				paginate.curPage = paginate.curPage-1;
			}else{
				paginate.curPage = page;
			}
		},
		// 跳转
		goPage:function(params){
			
			// 当前页计算
			paginate.getCurPage(params.page);
			if(paginate.curPage < 1){
				paginate.curPage = 1;
				return;
			}
			
			// 查询信息
			$.get(params.url+"&pageNum="+paginate.curPage+"&pageSize="+paginate.pageSize, function(result) {
				// 当前页大于总页数,数据不刷新
				paginate.totalPage = result.totalPage;
				if(paginate.curPage > result.totalPage){
					paginate.curPage = result.totalPage;
					return;
				}
				
				// 当前页小于6页
				if(paginate.curPage < 6){
					var maxPage = result.totalPage;
					if(maxPage > 5)maxPage=5;
					paginate.showPage(maxPage, 1, paginate.curPage);
				}else{
					paginate.showPage(paginate.curPage, paginate.curPage-4, paginate.curPage);
				}
				
				// 列表信息显示
				$(params.contaner).html('');
				model.loaderList(result.data, params.template, params.contaner);
				$(".cbp_tmlabel").css("opacity", "1");// 显示列表信息
				
			});
		}
};

4、接口返回类型