jquery分頁外掛程式開發

思路： 可定製每頁顯示條數； 導航顯示頁碼數量； 單頁面可使用多次； 樣式可定製； 參數可配置； 採用form方式提交分頁； 於是有了：

// 預設值var defaults = { rootCss : 'micePage',// 根css，負責不同css樣式套系的區分url : '',// 跳轉urlviewPageNum : 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="首頁" onclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\',1,'+opts.totalPage+')"/>';pageBox = pageBox+' <ul>';pageBox = pageBox+'<li> <a onclick="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 onclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\','+(i+1)+','+opts.totalPage+')"> '+(i+1)+' </a></li>';}else{pageBox = pageBox+'<li> <a onclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\','+(i+1)+','+opts.totalPage+')"> '+(i+1)+' </a></li>';}}pageBox = pageBox+'<li> <a onclick="MicePage_toPage(\''+thisID+'_micePageForm\',\''+thisID+'_micePageFormCurrentPage\','+(opts.currentPage+1)+','+opts.totalPage+')"> > </a></li>';pageBox = pageBox+' </ul>';pageBox = pageBox+' <input type="button" class="weiYe" value="尾頁" onclick="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="確定" onclick="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',// 跳轉urlcurrentPage : <%=p.getCurrentPage()%>,// 當前頁數pageSize : 10,// 頁面顯示條數viewPageNum : 10,totalPage : <%=p.getTotalPage()%>// 總頁數});});</script><div id = "micePage"></div>

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