jquery分頁插件開發

• 思路：

1. 可定製每頁顯示條數；
2. 導航顯示頁碼數量；
3. 單頁面可使用多次；
4. 樣式可定製；
5. 參數可配置；
6. 採用form方式提交分頁；

• 於是有了：

// 默認值
		var defaults = { 
			rootCss : 'micePage',				// 根css，負責不同css樣式套系的區分
			url : '',							// 跳轉url
			viewPageNum : 10,					// 默認顯示頁數
			pageNoParamName : 'currentPage',	// 當前頁面對應參數名
			pageSizeParamName : 'pageSize',	// 頁面顯示條數對應參數名
			currentPage : 1,					// 當前頁數
			pageSize : 10,						// 頁面顯示條數
			totalPage : 4,						// 總頁數
			params:{}							// 參數列表
		}; 

• 核心思路在於根據定製參數拼接分頁導航串，於是有了：

var pageBox = "";
pageBox = pageBox+'<div id="'+thisID+'_micePageBox" class="'+opts.rootCss+'">';
// 拼裝表單
pageBox = pageBox+'<form id="'+thisID+'_micePageForm" action="'+opts.url+'" method="post">';
pageBox = pageBox+'<input type="hidden" name="'+opts.pageNoParamName+'" value="'+opts.currentPage+'" id="'+thisID+'_micePageFormCurrentPage"/>';
pageBox = pageBox+'<input type="hidden" name="'+opts.pageSizeParamName+'" value="'+opts.pageSize+'"/>';
// 遍歷翻頁參數
for(var key in opts.params){
	pageBox = pageBox+'<input type="hidden" name="'+key+'" value="'+opts.params[key]+'"/>'; 
}  
pageBox = pageBox+'</form>';
pageBox = pageBox+' <div class="leftx">';
pageBox = pageBox+'	 <input type="button" class="shouYe" value="首頁" οnclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\',1,'+opts.totalPage+')"/>';
pageBox = pageBox+'	 <ul>';
pageBox = pageBox+'		<li> <a οnclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\','+(opts.currentPage-1)+','+opts.totalPage+')"> < </a></li>';
// 計算翻頁條起始最小值
var min = 0;
if(opts.currentPage == 1){
	min = 0;
}else if(opts.currentPage == opts.totalPage){
	min = opts.totalPage - opts.viewPageNum;
}else{
	min = parseInt((opts.currentPage - 1) / opts.viewPageNum) * opts.viewPageNum;
}
// 防止越界
if(min < 0){
	min = 0;
}
// 計算翻頁條起始最大值
var max = min + opts.viewPageNum;
// 若最大顯示條數大於總頁數，則使用總頁數
if(max > opts.totalPage){
	max = opts.totalPage;
}
if(max - min < opts.viewPageNum){
	min = max - opts.viewPageNum;
}
// 防止越界
if(min < 0){
	min = 0;
}
// 顯示翻頁數字
for(var i = min;i < max;i++){
	// 如果爲當前頁，則設置特殊css樣式
	if((i+1) == opts.currentPage){
	        pageBox = pageBox+'		<li class="chos"> <a οnclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\','+(i+1)+','+opts.totalPage+')"> '+(i+1)+' </a></li>';
	}else{
		pageBox = pageBox+'		<li> <a οnclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\','+(i+1)+','+opts.totalPage+')"> '+(i+1)+' </a></li>';
	}
}
pageBox = pageBox+'		<li> <a οnclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\','+(opts.currentPage+1)+','+opts.totalPage+')"> > </a></li>';
pageBox = pageBox+'	 </ul>';pageBox = pageBox+'	 <input type="button" class="weiYe" value="尾頁" οnclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\','+opts.totalPage+'),'+opts.totalPage+')"/>';
pageBox = pageBox+' </div>';
pageBox = pageBox+' <p>';
pageBox = pageBox+'	 跳轉';
pageBox = pageBox+'	 <input type="text" id="'+thisID+'_MiceToPage" value="" />';
pageBox = pageBox+'	 頁';
pageBox = pageBox+' </p>';
pageBox = pageBox+' <input type="button" name="" class="queDing" value="確定" οnclick="MicePage_InputToPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\',\''+thisID+'_MiceToPage\','+opts.totalPage+')"/>';
pageBox = pageBox+'</div>';

• 用起來一定要簡單，於是有了：

<script type="text/javascript">
$(document).ready(function(){
	$("#micePage").mice_pageBox({
		rootCss : 'micePage',		// 根css，負責不同css樣式套系的區分
		url : '<%=basePath%>rzht_news/ptNewsList',	// 跳轉url
		currentPage : <%=p.getCurrentPage()%>,		// 當前頁數
		pageSize : 10,			// 頁面顯示條數
		viewPageNum : 10,
		totalPage : <%=p.getTotalPage()%>			// 總頁數
	});
});
</script>

<div id = "micePage"></div>

• 原文地址：http://blog.csdn.net/yueritian/article/details/50195023