js分頁顯示

1.HTML頁面中代碼如下

<div class="page">
    	
    </div>
           

2.HTML中js代碼引用

<script src="js/jquery.min.js"></script>
<script src="js/model.js"></script>
<script src="js/page.js"></script>
           

<script type="text/javascript">
	
	$(function() {
		// 初始化資訊
		paginate.use(1, 5);
		page(1);
	});
	
	// 初始化變量
	var url = model.bhost + "api/article/list.ht?type=1";
	var template = $("#list_info").html();
	
	/**翻頁 */
	function page(page){
		paginate.goPage({url:url,template:template,contaner:".cbp_tmtimeline",page:page});
	}
	
</script>
           

3、js抽出檔案

var paginate={
		curPage:1,
		totalPage:0,
		pageSize:5,
		pageHtml:'<a href="javascript:page(${num})" target="_blank" rel="external nofollow" >${dpy}</a>', // 頁碼html模闆
		totalHtmlBefore:'  <a title="Total record"><b id="total_num">',//總頁數html
		totalHtmlAfter:'</b></a>',
		use:function(_curPage,_pageSize){
			this.curPage = _curPage;
			this.pageSize = _pageSize;
		},
		// 展示分頁資訊
		showPage:function(maxPage, start, curPage){
			// 清空分頁資訊
			$(".page").html("");
			// 加載分頁資訊
			var list = paginate.createPageData(maxPage, start);
			model.loaderList(list, this.pageHtml, ".page");
			// 顯示總頁數
			$(".page").append(this.totalHtmlBefore + curPage+"/" +this.totalPage + this.totalHtmlAfter);
			// 顯示目前頁樣式
			$(".page a").css("color","#aee1ff");
			$(".page a[href='javascript:page("+this.curPage+")']").css("color","#FF0000");
			
		},
		// 建立頁碼資料清單
		createPageData:function(curPage, start){
			var numList = [];
			numList.push(paginate.createObj(-1));
			for(var i=start; i<=curPage; i++){
				var numObj = paginate.createObj(i);
				if(numObj != null)
				numList.push(numObj);
			}
			numList.push(paginate.createObj(-2));
			return numList;
		},
		// 建立頁碼資料
		createObj:function(i){
			var numObj = {};
			if(i == -2){
				numObj.num = "-2";
				numObj.dpy = ">";
			}else if(i == -1){
				numObj.num = "-1";
				numObj.dpy = "<";
			}else{
				numObj.num = i+"";
				numObj.dpy = i+"";
			}
			return numObj;
		},
		getCurPage:function(page){
			
			if(page == "-2"){
				paginate.curPage = paginate.curPage +1;
			}else if(page == "-1"){
				paginate.curPage = paginate.curPage-1;
			}else{
				paginate.curPage = page;
			}
		},
		// 跳轉
		goPage:function(params){
			
			// 目前頁計算
			paginate.getCurPage(params.page);
			if(paginate.curPage < 1){
				paginate.curPage = 1;
				return;
			}
			
			// 查詢資訊
			$.get(params.url+"&pageNum="+paginate.curPage+"&pageSize="+paginate.pageSize, function(result) {
				// 目前頁大于總頁數,資料不重新整理
				paginate.totalPage = result.totalPage;
				if(paginate.curPage > result.totalPage){
					paginate.curPage = result.totalPage;
					return;
				}
				
				// 目前頁小于6頁
				if(paginate.curPage < 6){
					var maxPage = result.totalPage;
					if(maxPage > 5)maxPage=5;
					paginate.showPage(maxPage, 1, paginate.curPage);
				}else{
					paginate.showPage(paginate.curPage, paginate.curPage-4, paginate.curPage);
				}
				
				// 清單資訊顯示
				$(params.contaner).html('');
				model.loaderList(result.data, params.template, params.contaner);
				$(".cbp_tmlabel").css("opacity", "1");// 顯示清單資訊
				
			});
		}
};
           

4、接口傳回類型