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>