解决js中分页模块，分页列表，怎么做_js分页页数过多怎么解决-优快云博客

本文链接：https://blog.youkuaiyun.com/TomHaveNoCat/article/details/83109164

本文详细介绍了使用JavaScript实现分页列表的方法，包括计算页码、生成分页链接及页面跳转逻辑，适用于前后端分离的项目。

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

最近工作中在做一个分页列表的一个东西，要求在js中写，不多比比，直接上关键代码

 htmlText=htmlText+'<div class="page">';
		  
		  //重写分页列表
		  //一页的内容
 			var pageSize = parseInt(data.pageSize);
 			//总共多少条数据
 			var total_number = parseInt(data.totalCount);
 			//当前页
 			var page = parseInt(data.pageNo);
 			//分页列表中间夹几个页码
 			var pageLength = 5;

 			var pageTotal = (total_number % pageSize == 0 ? total_number
 					/ pageSize : (total_number - total_number % pageSize)
 					/ pageSize + 1);

 			if (pageTotal > 1) {

 				var start = 0;
 				//设置页码头
 				if ((page - page % pageLength) / pageLength == 0) {
 					start = 1;
 				} else if (page % pageLength == 0 && page / pageLength == 1) {
 					start = 1;
 				} else if (page % pageLength == 0 && page / pageLength > 1) {
 					start = (page / pageLength - 1) * pageLength + 1;
 				} else if ((page - page % pageLength) / pageLength != 0) {
 					start = ((page - page % pageLength) / pageLength)
 							* pageLength + 1;
 				}
 				//进行头一页设置
 				if (page > 1) {
					htmlText =htmlText+'<a href="javascript:loadMore('+(page-1)+');" class="btn_prev">上一页</a>';
					htmlText =htmlText+'<a href="javascript:loadMore(1);">1</a>';

 				} else {
					htmlText =htmlText+'<a href="#" class="btn_prev">上一页</a>';
					htmlText =htmlText+'<a href="#"; class="active">1</a>';


 				}

 				//前省略号
 				if (start - pageLength >= 0) {
					htmlText =htmlText+'<a href="javascript:loadMore('+(start - pageLength)+');" title="'+ (start - pageLength) + '">...</a>';					
 				}
 				//分页列表
 				for (var j = (start == pageTotal ? pageTotal - pageLength + 1
 						: start); j <= (start + pageLength - 1 <= pageTotal ? start
 						+ pageLength - 1
 						: pageTotal); j++) {
    			if(j!=1&&j!=pageTotal){
    
  
 					if (j == page) {
 						htmlText =htmlText+'<a class="active"  href="javaScript:loadMore('+ j +')" title="' + j + '">' + j+ '</a>';
 					} else {
 						htmlText =htmlText+'<a href="javaScript:loadMore(' + j+')" title="' + j + '">' + j+ '</a>';
 					}
    		  	}
 				}

 				//省略点
 				if (pageTotal > start + pageLength - 1) {
 					htmlText =htmlText+'<a href="javaScript:loadMore('+ (start + pageLength) +')" title="'+ (start + pageLength) + '">...</a>';
 				}
 				//下一页
 				if (pageTotal > page) {
 				htmlText =htmlText+'<a href="javaScript:loadMore('+ (pageTotal)+')">'+pageTotal+'</a>';
   			 	htmlText =htmlText+'<a href="javaScript:loadMore('+ (page + 1)+')" class="btn_next">下一页</a>';
 				} else {
 				htmlText =htmlText+'<a class="active" href="#">'+pageTotal+'</a>';
    			htmlText =htmlText+'<a href="#" class="btn_next">下一页</a>';
 				}
 			}
		  
		
        htmlText=htmlText+'</div>';

now，做出来后效果如下
在这里插入图片描述
2019年8月5号
今天我又弄了一个分页，记录一下

<script>
     
  var type = "${param.type}";
  var cid ="${param.cid}";//栏目id
  var keyword ="${param.keyword}";
  var pageNo = "${param.pageNo}";
  if(pageNo==""){
  pageNo=1;        
  }
  var pageSize = 10;
  function loadData(){
  	var url = "/ocms/.content/function_provider/qurey?needPage=1&PP=1&type="+type+"&cid="+cid+"&keyword="+keyword+"&pageNo="+pageNo+"&pageSize="+pageSize; 
  	$.get(url,function(data){
		data = JSON.parse(data);
  		var list = data.result;
  		if(list.length>0){
  			var begin = 0;
  			if(pageNo==1){
   				var htmlfirst="";
  				var num=0;
  			begin = num;
  			}
  			var htmlText = "";
  			for(var i = begin;list.length>i;i++){
  				var bean = list[i];
  					htmlText = htmlText+'<div class="item"><div class="title"><a href="javascript:;" target="_blank">'+bean.title+'</a></div><div class="content-box"><div class="img-box"><a href="javascript:;" target="_blank"><img src="'+bean.image+'"/></a></div><div class="content"><div class="intro">'+bean.description+'</div><div class="bottom"><div class="date-time">'+bean.publishDateStr+'</div><div class="more"><a href="'+bean.url+'" target="_blank">详情</a></div></div></div></div></div>';
  			}
  			$(".news-list-text-image").append(htmlText);
         var pageNoc=data.pageNo+1;
         var pageNot=pageNoc+1;
         var pageNof=pageNot+1;
		 var pagepre1=pageNo-1;	
  		 var pagepre2=pageNo-2;
		 var pageText ="";
		if(data.totalPages - data.pageNo >=2 ){//总页数比当前页多两页以上（总页数肯定大于三）
   pageText='<span class="item prev"><a href="?cid='+cid+'&pageNo='+data.prePage+'"><<</a></span><span class="item active"><a href="javascript:;">'+data.pageNo+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+pageNoc+'">'+pageNoc+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+pageNot+'">'+pageNot+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+pageNof+'">...</a></span><span class="item"><a  href="?cid='+cid+'&pageNo='+data.totalPages+'">'+data.totalPages+'</a></span><span class="item next last-child"><a  href="?cid='+cid+'&pageNo='+data.nextPage+'">>></a></span>';
  }
  else if(data.totalPages >=3  && (data.totalPages - data.pageNo ==1) ){//总页数比当前页多1页（（总页数大于等于三））
   pageText='<span class="item prev"><a href="javaScript:loadData('+cid+','+data.prePage+')"><<</a></span><span class="item "><a href="?cid='+cid+'&pageNo='+data.prePage+'">'+data.prePage+'</a></span><span class="item active"><a href="javaScript:">'+pageNo+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+pageNoc+'">'+pageNoc+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+pageNof+'">...</a></span><span class="item"><a  href="?cid='+cid+'&pageNo='+data.totalPages+'">'+data.totalPages+'</a></span><span class="item next last-child"><a  href="?cid='+cid+'&pageNo='+data.nextPage+'">>></a></span>';    
  }
  else if(data.totalPages >=3  && (data.totalPages - data.pageNo ==0) ){//总页数就是当前页（（总页数大于等于三））
   pageText='<span class="item prev"><a href="?cid='+cid+'&pageNo='+data.prePage+'"><<</a></span><span class="item "><a href="?cid='+cid+'&pageNo='+pagepre2+'">'+pagepre2+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+pagepre1+'">'+pagepre1+'</a></span><span class="item active"><a href="javaScript:">'+pageNo+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+data.nextPage+'">...</a></span><span class="item "><a href="?cid='+cid+'&pageNo='+data.totalPages+'"  >'+data.totalPages+'</a></span><span class="item next last-child"><a  href="?cid='+cid+'&pageNo='+data.nextPage+'">>></a></span>';    
  }
  else if(data.totalPages ==2  && (data.totalPages - data.pageNo ==1)){//总页数为2
  pageText='<span class="item prev"><a href="?cid='+cid+'&pageNo='+data.prePage+'"><<</a></span><span class="item active"><a href="javascript:;">'+data.pageNo+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+pageNoc+'">'+pageNoc+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+data.nextPage+'">...</a></span><span class="item"><a  href="?cid='+cid+'&pageNo='+data.totalPages+'">'+data.totalPages+'</a></span><span class="item next last-child"><a href="?cid='+cid+'&pageNo='+data.nextPage+'" >>></a></span>';
  }
  else if(data.totalPages ==2  && (data.totalPages - data.pageNo ==0)){//总页数为2
  pageText='<span class="item prev"><a href="?cid='+cid+'&pageNo='+data.prePage+'"><<</a></span><span class="item "><a href="?cid='+cid+'&pageNo='+data.prePage+'">'+data.prePage+'</a></span><span class="item active"><a href="javaScript:">'+pageNo+'</a></span><span class="item"><a href="?cid='+cid+'&pageNo='+data.nextPage+'">...</a></span><span class="item"><a  href="?cid='+cid+'&pageNo='+data.totalPages+'">'+data.totalPages+'</a></span><span class="item next last-child"><a href="?cid='+cid+'&pageNo='+data.nextPage+'">>></a></span>';
  }
        $(".pages").append(pageText);  
  			pageNo++;
  		}
  	})
  
  }
  
  loadData();
  
  
  
</script>

这个是最近和同事一起开发东西时，为了保持一致，临时用了一个别人的