1. 程式人生 > >解決js中分頁模組,分頁列表,怎麼做

解決js中分頁模組,分頁列表,怎麼做

最近工作中在做一個分頁列表的一個東西,要求在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,做出來後效果如下
在這裡插入圖片描述