解决js中分页模块,分页列表,怎么做

版权声明:转载请注明出处https://blog.csdn.net/tomhavenocat https://blog.csdn.net/TomHaveNoCat/article/details/83109164

最近工作中在做一个分页列表的一个东西,要求在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,做出来后效果如下
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/TomHaveNoCat/article/details/83109164