javascrip分頁展示

模仿 google 分頁效果

效果圖

首頁：

中間頁：

末頁：

代碼部分：

$(function(){
	loadListPage(1);
});

function loadListPage(targetPage_num){
	$.ajax({
	    url : 'publisher/queryBookList',
		data:{
			pageNum:targetPage_num
		},
		type:'post',
		dataType:'json',
		success:function(result){
			
			/**
			 * result 爲服務端返回的數據對象
			 *  屬性如下
			 * 
			 * 	private String errorCode; 
			 *	
			 *	private String errorMsg;
				
			  	private Integer total;總記錄數
				
				private Object data;  數據列表
				
				private Integer totalPage; 總頁數
			 */
			
			if(result && result.errorCode == '000000'){
				var total = result.total;
				if(total < 1){
					$('#datatbody').html('<tr><td colspan="6" style="font-size:14px;color:blue">沒有任何數據</td></tr>');
				}else{
					var totalPage = result.totalPage;
					var bookList = result.data;
					/**
					 * 列表數據
					 */
					var dataListTr = getBookListTr(bookList);
					
					$('#datatbody').html(dataListTr);
					/**
					 * 頁碼數據
					 */
					var pageControlHtml = getDigitalLi(totalPage,targetPage_num);
					
					$('#pageControl').html(pageControlHtml);
					
				}
			}
		}
	});
}
/**
 * 將數據list生成對應的<tr>
 * @param bookList
 * @returns {String}
 */
function getBookListTr(bookList){
	var bookDataTr = '';
	for(var i=1;i<=bookList.length;i++){
		var bookTr = bookList[i-1];
		bookDataTr += '<tr>' +
					  '<td>'+i+'</td>'+
					  '<td>'+bookTr.isbn+'</td>' +
					  '<td>'+bookTr.bookNameCn+'</td>'+
					  '<td>'+bookTr.priceType+'</td>'+
					  '<td>'+bookTr.prepareTimeStr+'</td>'+
					  '<td><a href="detail.html?id='+bookTr.id+'"><input type="button" value="查看"></a></td>'+
					  '</tr>';
	}
	return bookDataTr;
}

/**
 * 重點在此：
 * 根據總頁數和當前頁動態生成 頁碼 ，
 * 如果當前頁是（1~4）或 (totalPage-4 ~ totalPage)即最後4頁 則無法處於最中間
 * 如果是其它頁碼就處於最中間   效果類似於Google的分頁
 * @param total
 * @param targetPage_num
 * @returns {String}
 */
<span style="color:#ff0000;">function getDigitalLi(total,targetPage_num){
	var pageControlHtml = '';
	if(total < 1){
		return pageControlHtml;
	}
	
	pageControlHtml += "<nav><ul class='pagination'>";
	
	pageControlHtml += "<li><a id='first_page' number='1' href='javascript:loadListPage("+1+")'>首頁</a></li>";
	if(targetPage_num > 1){
		pageControlHtml += "<li><a id='prev_page' number="+(targetPage_num-1)+" href='javascript:loadListPage("+(targetPage_num-1)+")'>«</a></li>";
	}
	if(total > 9){
		if(targetPage_num <= 5){
			/**
			 * 獲取1~9頁
			 */
			for(var i=1;i<10;i++){
				if(i == targetPage_num){
					pageControlHtml += "<li class='sr-only'><a number="+i+"  href=javascript:loadListPage("+i+")>"+i+"</a></li>";
				}else{
					pageControlHtml += "<li><a number="+i+" href='javascript:loadListPage("+i+")'>"+i+"</a></li>";
				}
			}
		}else if(total - targetPage_num < 5){
			/**
			 * 獲取targetPage_num-8 ~ targetPage_num 頁
			 */
			for(var i = total-8 ; i <= total ; i++){
				if(i == targetPage_num){
					pageControlHtml += "<li class='sr-only'><a number="+i+"  href='javascript:loadListPage("+i+")'>"+i+"</a></li>";
				}else{
					pageControlHtml += "<li><a number="+i+" href='javascript:loadListPage("+i+")'>"+i+"</a></li>";
				};
			};
		}else{
			/**
			 * 處於中間狀態的頁數
			 */
			for(var i = targetPage_num - 4 ; i <= targetPage_num + 4 ; i++){
				if(i == targetPage_num){
					pageControlHtml += "<li class='sr-only'><a number="+i+"  href='javascript:loadListPage("+i+")'>"+i+"</a></li>";
				}else{
					pageControlHtml += "<li><a number="+i+" href='javascript:loadListPage("+i+")'>"+i+"</a></li>";
				}
			}
		}
	}else{
		/**
		 * 獲取1~targetPage_num頁
		 */
		for(var i=1; i <= total ; i++){
			if(i == targetPage_num){
				pageControlHtml += "<li class='sr-only'><a number="+i+"  href='javascript:loadListPage("+i+")'>"+i+"</a></li>";
			}else{
				pageControlHtml += "<li><a number="+i+" href='javascript:loadListPage("+i+")'>"+i+"</a></li>";
			}
		}
	}
	if(targetPage_num < total){
		pageControlHtml += "<li><a id='next_page' number="+(targetPage_num + 1)+" href='javascript:loadListPage("+(targetPage_num + 1)+")'>»</a></li>";
	}
	pageControlHtml += "<li><a id='last_page' number="+total+" href='javascript:loadListPage("+total+")'>末頁</a></li>";
	
	pageControlHtml += "  </ul></nav>";
	return pageControlHtml;
};</span>