jquery 分頁控件（一）

      以前一直都是用別人的分頁控件，雖然用得很爽，但總覺的還是自己寫個小插件比較好，這個插件效果、代碼等都有參照別人完成的控件。即便功能並不是那么完善，擴展性也不好，bug或許還很多。個人覺得，適合自己用就行了。你對自己寫的肯定會比較熟悉，當插件需要不停的重構，這個插件就慢慢完善了。現在要做的是走出開頭的那一步。往往都是因為開頭的那一步阻礙了我們。

廢話一大堆........

慣例 Demo下載

效果圖：

 

一、定義基礎數據

    //基礎數據
    var current_page = 1;  //當前頁
    var num_edge = 4;    //省略號前后顯示數量
    var counts = 40;     //總頁數
    var display_num = 10;  //每次顯示數字數量

 

二、分頁控件原理

第一種情況，出現前面：

//第一種情況為 出現前面的數字，假如當前頁為current_page=12，display_num=10，num_edge=4 
//display_num + Math.ceil(num_edge / 2) = 12 當current_page超過了12 就會出現第三種情況
//num1 = 16 = Math.max(16,10）  意思是可以顯示超過10個數字
//num2 = 14 = Math.min（16,14） 意思是最多只能顯示14個數字
if (current_page <= (display_num + Math.ceil(num_edge / 2))) {//Math.ceil(num_edge / 2)表示向上取整 var num1 = Math.max((current_page + num_edge), display_num);
    var num2 = Math.min(num1, (display_num + num_edge));
    for (var i = 1; i <= num2; i++) {
       addItem(i);//生成數字的方法
    }
    addItem(-1, {text: "...", classes: "ellipse"});//省略號
 //顯示后面的那一段數字 for (var i = counts - num_edge + 1; i <= counts; i++) {
       addItem(i);
    }
}

     

第二種情況，出現后面：

// 第二種情況，出現后面的數字,假如當前頁為current_page=31，display_num=10，num_edge=4 
//當current_page 小於31 就會出現第三種情況
else if (current_page > (counts - display_num)) {
   //生成前面的那一段 for (var i = 1; i <= num_edge; i++) {
      addItem(i);
   }
   addItem(-1, {text: "...", classes: "ellipse"});//省略號
   //num1 = 27 = Math.min(27,31) var num1 = Math.min((current_page - num_edge), (counts - display_num + 1));
   var num2 = counts;
   for (var i = num1; i <= num2; i++) {
      addItem(i);
   }
}

     

第三種情況，出現中間：

//第三種情況，出現中間數字
 else {
      for (var i = 1; i <= num_edge; i++) {
           addItem(i);
      }
      addItem(-1, {text: "...", classes: "ellipse"});
     //在這種情況，current_page 總是大於12小於31
 //num2 - num1 總是等於10 var num1 = current_page - Math.ceil(display_num / 2);
      var num2 = num1 + display_num - 1;
      for (var i = num1; i <= num2; i++) {
           addItem(i);
      }
      addItem(-1, {text: "...", classes: "ellipse"});
      for (var i = counts - num_edge; i <= counts; i++) {
          addItem(i);
      }
}

 

三、生成數字

//生成數字
 var addItem = function (page_id, opts) {
        //$.extend()這句意思是傳過來的opts將覆蓋{text: page_id, classes: ""}，如果opts為空 則與{}匹配
        //例如：addItem(current_page - 1, {text: "<<", classes: "btn_text"});
        opts = $.extend({text: page_id, classes: ""}, opts || {});
       //省略號、第一頁（page_id < 1）和 最后一頁（page_id > options.counts_num）所生成的標簽
        if (page_id < 1 || page_id > counts) {
            var view = $("<span class='" + opts.classes + "'>" + opts.text + "</span>");
        }
        //當前頁（page_id == options.current_page）的樣式和標簽
        else if (page_id == current_page) {
            var view = $("<span class='current_background'>" + opts.text + "</span>");
        }
        //其他情況
        else {
            var view = $("<span class='" + opts.classes + "'>" + opts.text + "</span>").bind("click", getClick(page_id));
        }
        $('.pagination').append(view);//標簽放入.pagination
    };
    //點擊某個數字調用的方法
    var getClick = function (page_id) {
        return function () {
            return pageSelected(page_id);
        }
    };
    var pageSelected = function (index) {
        current_page = index;
        $(".views div").eq(current_page - 1).show().siblings().hide();
        viewNum();
    };

      大部分的代碼都已經展現出來，其他部分可以看源文件。當然不單只是這種邏輯，還有其他更好的邏輯只是我想不到而已，我能想到的就是這種比較直觀、笨的邏輯，就只能把效果顯示出來而已。如果您有更好算法請告訴我，非常感謝！如果你看有哪些地方不正確、不好的請告訴我，同樣感謝！

      下一章將會重構成插件，只要傳入參數就可以隨便調用了。然后通過asp.net項目把插件應用到實際項目中。

 

如果你覺得還不錯，給個推薦吧！

轉載請注明出處，謝謝！