自己封装的JS分页功能[用于搭配后台使用]

* 2017.5.11 增加了迭代回调功能，用于实现实时的页数展示与分页数据请求。

* 2016.7.03 修复bug，优化代码逻辑

* 2016.5.25 修复如果找不到目标对象的错误抛出。

* 2016.5.11 修复当实际页数（pageNumber）小于生成的页码间隔数时的bug

* 2016.4.3   实现原生JS分页功能

  1 ;
  2 (function(root) {
  3     'use strict';
  4 
  5     function page(params) {
  6 
  7         this.dom = params.dom || null;
  8         this.fn = params.fn || null;
  9         this.padding = params.padding || 2;
 10         this.total = params.total;
 11         this.curpagenumber = params.curpagenumber || 0;
 12         this.detailed = params.detailed || null;
 13 
 14         this.cur = 1;
 15         this.start = 1;
 16         this.end = this.total;
 17 
 18         if (this.curpagenumber) {
 19             this.cur = this.curpagenumber;
 20         }
 21 
 22         this.dom && this.total && this.core();
 23 
 24     }
 25     page.prototype.core = function(curentPageNumber) {
 26         var a = [];
 27 
 28         if (curentPageNumber) {
 29             this.cur = curentPageNumber;
 30         }
 31 
 32         if (this.cur > 1) {
 33             a.push('<a href="javascript:;" class="prev">上一页</a>');
 34             this.detailed && a.push('<a href="javascript:;" class="first">首页</a>');
 35             a.push('...');
 36         }
 37 
 38 
 39         if (this.total > this.padding * 2 + 1) { //判断是否启用间隔数，如果总页数大于间隔数的2倍加1的话。
 40             if (this.cur <= this.padding) { // 如果当前页码小于间隔数
 41                 this.start = 1;
 42                 this.end = this.padding * 2 + 1;
 43             } else if (this.cur > this.padding && this.total >= this.cur + this.padding) { // 如果当前页码大于间隔数且总页数大于当前页面加上间隔数
 44                 this.start = this.cur - this.padding;
 45                 this.end = this.cur + this.padding;
 46             } else {
 47                 this.start = this.total - this.padding * 2;
 48                 this.end = this.total;
 49             }
 50         } else {
 51             this.start = 1,
 52                 this.end = this.total;
 53         }
 54 
 55 
 56         for (; this.start <= this.end; this.start++) {
 57             if (this.cur != this.start) {
 58                 a.push('<a href="javascript:;">' + this.start + '</a>');
 59             } else {
 60                 a.push('<span class="cur">' + this.cur + '</span>');
 61             }
 62         }
 63         if (this.cur < this.total - 1) {
 64             a.push('...');
 65             this.detailed && a.push('<a href="javascript:;" class="last">尾页</a>');
 66         }
 67         if (this.cur < this.total) {
 68             a.push('<a href="javascript:;" class="next">下一页</a>');
 69         }
 70 
 71 
 72         this.dom.innerHTML = a.join('');
 73         this.bind();
 74     };
 75 
 76     page.prototype.bind = function() {
 77         var _this = this;
 78 
 79         this.dom.onclick = function(event) {
 80             var event = event || window.event,
 81                 src = event.srcElement || event.target;
 82 
 83             if (src.nodeName == 'A') {
 84                 switch (src.className) {
 85                     case '':
 86                         _this.cur = parseInt(src.innerHTML);
 87                         break;
 88                     case 'prev':
 89                         _this.cur = --_this.cur;
 90                         break;
 91                     case 'next':
 92                         _this.cur = ++_this.cur;
 93                         break;
 94                     case 'last':
 95                         _this.cur = _this.total;
 96                         break;
 97                     case 'first':
 98                         _this.cur = 1;
 99                 }
100                 _this.fn && _this.fn(_this.cur);
101                 _this.core();
102             }
103         };
104 
105     };
106 
107     root.page = page;
108 
109 })(window);

一般使用方式：

 1 page({
 2     'dom':document.getElementById('page'),
 3     'total':13,
 4     'padding':2,
 5     'fn':function(cur){
 6         console.log(cur);
 7     }
 8 });
 9 /* {} 是一个参数对象，其参数详细如下：
10     |- dom      ：一个dom对象，用于保存生成的页码。
11     |- total    : 总页数。
12     |- padding  : 生成的间隔,默认间隔为2个。
13     |- detailed : 是否出现首页及尾页
14     |- fn       : 当前页码的回调函数。
15 */

高级使用方式：在接口中回调

 1 function getData(pageNum) {
 2     $.post('data.htm', {
 3         'pageNumber': pageNum
 4     }, function(data) {
 5         if (data.errorCode === 0) {
 6             page({
 7                 dom: document.querySelectorAll('.pages')[0],
 8                 total: data.total,
 9                 curpagenumber: pageNum,
10                 fn: function(num) {
11                     getData(num);
12                 }
13             });
14         }
15     })
16 } 
posted @ 2016-04-03 15:43  卷柏的花期  阅读(372)  评论(0)  编辑  收藏  举报