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