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

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

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

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

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

* 2016.4.3   实现原生JS分页功能

 ;
 (function(root) {
     'use strict';

     function page(params) {

         this.dom = params.dom || null;
         this.fn = params.fn || null;
         this.padding = params.padding || 2;
         this.total = params.total;
         this.curpagenumber = params.curpagenumber || 0;
         this.detailed = params.detailed || null;

         this.cur = 1;
         this.start = 1;
         this.end = this.total;

         if (this.curpagenumber) {
             this.cur = this.curpagenumber;
         }

         this.dom && this.total && this.core();

     }
     page.prototype.core = function(curentPageNumber) {
         var a = [];

         if (curentPageNumber) {
             this.cur = curentPageNumber;
         }

         if (this.cur > 1) {
             a.push('<a href="javascript:;" class="prev">上一页</a>');
             this.detailed && a.push('<a href="javascript:;" class="first">首页</a>');
             a.push('...');
         }

         if (this.total > this.padding * 2 + 1) { //判断是否启用间隔数，如果总页数大于间隔数的2倍加1的话。
             if (this.cur <= this.padding) { // 如果当前页码小于间隔数
                 this.start = 1;
                 this.end = this.padding * 2 + 1;
             } else if (this.cur > this.padding && this.total >= this.cur + this.padding) { // 如果当前页码大于间隔数且总页数大于当前页面加上间隔数
                 this.start = this.cur - this.padding;
                 this.end = this.cur + this.padding;
             } else {
                 this.start = this.total - this.padding * 2;
                 this.end = this.total;
             }
         } else {
             this.start = 1,
                 this.end = this.total;
         }

         for (; this.start <= this.end; this.start++) {
             if (this.cur != this.start) {
                 a.push('<a href="javascript:;">' + this.start + '</a>');
             } else {
                 a.push('<span class="cur">' + this.cur + '</span>');
             }
         }
         if (this.cur < this.total - 1) {
             a.push('...');
             this.detailed && a.push('<a href="javascript:;" class="last">尾页</a>');
         }
         if (this.cur < this.total) {
             a.push('<a href="javascript:;" class="next">下一页</a>');
         }

         this.dom.innerHTML = a.join('');
         this.bind();
     };

     page.prototype.bind = function() {
         var _this = this;

         this.dom.onclick = function(event) {
             var event = event || window.event,
                 src = event.srcElement || event.target;

             if (src.nodeName == 'A') {
                 switch (src.className) {
                     case '':
                         _this.cur = parseInt(src.innerHTML);
                         break;
                     case 'prev':
                         _this.cur = --_this.cur;
                         break;
                     case 'next':
                         _this.cur = ++_this.cur;
                         break;
                     case 'last':
                         _this.cur = _this.total;
                         break;
                     case 'first':
                         _this.cur = 1;
                 }
                 _this.fn && _this.fn(_this.cur);
                 _this.core();
             }
         };

     };

     root.page = page;

 })(window);

一般使用方式：

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

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

 function getData(pageNum) {
     $.post('data.htm', {
         'pageNumber': pageNum
     }, function(data) {
         if (data.errorCode === 0) {
             page({
                 dom: document.querySelectorAll('.pages')[0],
                 total: data.total,
                 curpagenumber: pageNum,
                 fn: function(num) {
                     getData(num);
                 }
             });
         }
     })
 }