jQuery分頁外掛程式

少於10頁

大於10頁就會出現省略符號，原則是中間5頁，左側固定1頁，右側固定1頁，如果省略符號只省略了1頁，則不顯示省略符號

大於100頁就不會顯示總頁數了，因為我覺得沒必要，哈哈哈

/*! * ------------------------------------------------------------- * 分頁外掛程式, 產生分頁頁碼, 並負責點擊事件的處理 * ------------------------------------------------------------- * 必須的JS: jquery.1.4.js * ------------------------------------------------------------- * $(xxx).paging(index, count, callback) *     index(int): 當前頁數 *     count(int): 總頁數 *     callback(function): 回呼函數, 回調參數為index, count * ------------------------------------------------------------- * $(xxx).paging(index, count, form) *     form(String): 表單名, 自動尋找表單下的name=page元素, 設定value, 並提交表單 * ------------------------------------------------------------- * .auto-paging 自動分頁 *     data-index指定當前頁數, data-count指定總頁數, data-form指定表單名 *     自動調用第二種方式: $(".auto-paging").paging(index, count, form); *      * ------------------------------------------------------------- * author: 趙卉華 * date: 2014-01-08 * ------------------------------------------------------------- */(function($) {var findForm = function(name) {var form = undefined;if (name instanceof jQuery || name.constructor == jQuery) {form = name;} else if (typeof(name) == "string") {form = $("form[name=" + name + "]");}return form && form.length > 0 ? form : undefined;};var go = function(event) { // 翻頁處理函數var self = $(this), wrap = self.closest("p"); // 分頁面板// 滾動至哪一頁, 上一頁下一頁取data-index, 頁碼取text()var index = self.attr("value") || self.text(),count = event.data.count, // 總頁數callback = event.data.callback; // 回呼函數if (callback) {var form;if ($.isFunction(callback)) { // 回呼函數// 重建分頁頁碼, 因為有可能通過AJAX方式更新資料wrap.parent().paging(index, count, callback);callback.call(wrap.find(".on").get(0), index, count);} else if (form = findForm(callback)) { // 表單名// 無需產生分頁頁碼, 因為提交表單會導致整個頁面重新整理var input = form.find("input[name=page]"); // 尋找page欄位if (input.length == 0) { // 沒有page欄位則建立input = $("").appendTo(form);}input.val(index); // 設定page欄位的值form.submit(); // 提交表單}} else { // 未指定回調方式, 重建分頁頁碼, 用於示範頁碼變化情況wrap.parent().paging(index, count, callback);}return false;};var create = function(index, count, callback) {// L=左側,R=右側,M=中間顯示幾個頁碼,// T=過渡頁碼,count超過這個數則不顯示右側的頁碼,只顯示過渡頁碼// 如L=1,R=1,M=3,T=100(過渡頁面=100)// count=80,index=10,   則結果為 [1]...[9][10][11]...[80]// count=200,index=10,  則結果為 [1]...[9][10][11]...[100]...// count=200,index=150, 則結果為 [1]...[100]...[149][150][151]...var L=1, R=1, M=5, T=100,cnt = parseInt(count), idx = parseInt(index), // 轉換為數字param = { count:cnt, callback:callback };var wrap = $(this).addClass("paging").children("p:first").empty();if (wrap.length == 0) {wrap = $("
").appendTo(this);}var add = function(p) {if (p === undefined) {wrap.append($("").append("..."));} else if (p == idx) {wrap.append($("").addClass("on").append(p));} else {var a = $("").attr("href", "#page="+p).bind("click", param, go);wrap.append(a.append(p));}wrap.append(" ");};if (cnt <= M+L+R+2) { // 總頁數很少, 少到不需要顯示省略符號for(var i=1; i<=cnt; i++) { add(i);}} else {var h = Math.floor(M/2),bgn = Math.min(Math.max(idx-h, L+2), cnt-M-R),end = Math.min(Math.max(idx+h, M+L+1), cnt-R-1);for (var i = 1; i <= L; i++) { // 左側頁碼add(i);}if (bgn <= L+2) { // 緊靠左側頁碼的頁碼add(L+1); } else {add(); // 省略符號}if (bgn > T+2) { add(T);add();} // 過渡頁碼for (var i = bgn; i <= end; i++) {add(i); // 中間頁碼}if (end >= cnt-R-1) { // 緊靠右側頁碼的頁碼add(cnt-R); } else {add(); // 省略符號}// 總頁數不大或即將達到總頁數, 則顯示if (cnt <= T || end >= cnt-R-1) {for(var i = cnt-R+1; i <= cnt; i++) {add(i); // 右側頁碼}} else if(end < T-2) { add(T); add(); // 過渡頁碼}}var prev = $("").append("<"); // 當前頁碼為1, 不綁定點擊事件if(idx > 1) { // 當前頁碼大於1時, 綁定點擊事件prev.attr("href", "#page=prev").attr("value",idx-1).bind("click", param, go);}wrap.prepend(" ").prepend(prev);var next = $("").append(">"); // 當前頁碼為最後一頁, 不綁定點擊事件if(idx < cnt) { // 當前頁碼小於最後一頁時, 綁定點擊事件next.attr("href", "#page=next").attr("value",idx+1).bind("click", param, go);}wrap.append(next);};$.fn.paging = function(index, count, callback) { // 分頁return this.each(function(i) {create.call(this, index, count, callback);return true;});};})(jQuery);$(function() {// 自動分頁, class="auto-paging", // data-index指定當前頁數, data-count指定總頁數, data-form指定表單名$(".auto-paging").each(function() {var self = $(this),index = self.attr("data-index") || 1,count = self.attr("data-count"),form = self.attr("data-form");count && self.paging(index, count, form);});});

/** 分頁樣式 **/html .paging {height:22px;}html .paging a {background-color:#FFFFFF;border:1px solid #BEBEBE;text-decoration:none;color:#404040;}html .paging a:hover, html .paging a.on {background-color:#4DAD5D;border:1px solid #4DAD5D;text-decoration:none;color:#FFFFFF;}html .paging a, html .paging i {float:left; display:inline;height:20px; line-height:20px;margin:0 4px; padding:0 5px;}html .paging i {font-style:normal;padding:0 4px;}