jquery 分页控件（一）

      之前一直都是用别人的分页控件，虽然用得很爽，但总觉的仍是本身写个小插件比较好，这个插件效果、代码等都有参照别人完成的控件。即使功能并非那么完善，扩展性也很差，bug或许还不少。我的以为，适合本身用就好了。你对本身写的确定会比较熟悉，当插件须要不停的重构，这个插件就慢慢完善了。如今要作的是走出开头的那一步。每每都是由于开头的那一步阻碍了咱们。

废话一大堆........

惯例 Demo下载

效果图：

 

1、定义基础数据

    //基础数据
    var current_page = 1;  //当前页
    var num_edge = 4;    //省略号先后显示数量
    var counts = 40;     //总页数
    var display_num = 10;  //每次显示数字数量

 

2、分页控件原理

第一种状况，出现前面：

//第一种状况为 出现前面的数字，假如当前页为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);
      }
}

 

3、生成数字

//生成数字
 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项目把插件应用到实际项目中。

 

若是你以为还不错，给个推荐吧！

转载请注明出处，谢谢！