以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果、代码等都有参照别人完成的控件。即便功能并不是那么完善,扩展性也不好,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项目把插件应用到实际项目中。

 

如果你觉得还不错,给个推荐吧!

转载请注明出处,谢谢!

 

 

 

posted on 2013-11-05 20:01  |WinKi|  阅读(2091)  评论(5编辑  收藏