JQuery分页插件使用心得

在修改别人的后台代码的时候发现其使用的一款分页插件，于是看了其源代码学习了一下，并将使用的心得整理了一下。
- 插件的源代码如下:

(function($, window, document) {
    // 定义构造函数
    function Paging(el, options) {
        this.el = el;
        this.options = {
            pageNo: options.initPageNo || 1, // 初始页码
            totalPages: options.totalPages || 1, //总页数
            totalCount: options.totalCount || '', // 条目总数
            slideSpeed: options.slideSpeed || 0, // 缓动速度
            jump: options.jump || false, // 支持跳转
            callback: options.callback || function() {} // 回调函数
        };
        this.init();
    }
    // 给实例对象添加公共属性和方法
    Paging.prototype = {
        constructor: Paging,
        init: function() {
            this.createDom();
            this.bindEvents();
        },
        createDom: function() {
            var that = this,
                ulDom = '',
                jumpDom = '',
                content = '',
                liWidth = 60, // li的宽度
                totalPages = that.options.totalPages, // 总页数
                wrapLength = 0;
            totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth;
            for (var i = 1; i <= that.options.totalPages; i++) {
                i != 1 ? ulDom += '
' + i + '
' : ulDom += '
' + i + '
';
            }
            that.options.jump ? jumpDom = '跳转' : jumpDom = '';
            content = '首页' +
                '上一页' +
                '
'px">' +
                '
'ms">' +
                ulDom +
                '
' +
'下一页' +
'尾页' +
jumpDom +
'
共 ' +
that.options.totalPages +
' 页
' +
'
' +
that.options.totalCount +
'
';
that.el.html(content);
},
bindEvents: function() {
var that = this,
pageSelect = $('#pageSelect'), // ul
lis = pageSelect.children(), // li的集合
liWidth = lis[0].offsetWidth, // li的宽度
totalPages = that.options.totalPages, // 总页数
pageIndex = that.options.pageNo, // 当前选择的页码
distance = 0, // ul移动距离
prePage = $('#prePage'),
nextPage = $('#nextPage'),
firstPage = $('#firstPage'),
lastPage = $('#lastPage'),
jumpBtn = $('#jumpBtn'),
jumpText = $('#jumpText');
prePage.on('click', function() {
pageIndex--;
if (pageIndex < 1) pageIndex = 1;
handles(pageIndex);
})
nextPage.on('click', function() {
pageIndex++;
if (pageIndex > lis.length) pageIndex = lis.length;
handles(pageIndex);
})
firstPage.on('click', function() {
pageIndex = 1;
handles(pageIndex);
})
lastPage.on('click', function() {
pageIndex = totalPages;
handles(pageIndex);
})
jumpBtn.on('click', function() {
var jumpNum = parseInt(jumpText.val().replace(/\D/g, ''));
if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) {
pageIndex = jumpNum;
handles(pageIndex);
jumpText.val(jumpNum);
}
})
lis.on('click', function() {
pageIndex = $(this).index() + 1;
handles(pageIndex);
})
function handles(pageIndex) {
lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page');
if (totalPages <= 5) {
that.options.callback(pageIndex);
return false;
}
if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth;
if (pageIndex == 2 || pageIndex == 1) distance = 0;
if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth;
pageSelect.css('transform', 'translateX(' + (-distance) + 'px)');
pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false);
pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false);
pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false);
pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false);
that.options.callback(pageIndex);
}
handles(that.options.pageNo); // 初始化页码位置
}
}
$.fn.paging = function(options) {
return new Paging($(this), options);
}
})(jQuery, window, document);

以及配合使用的css文件代码如下

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fl {
  float: left;
}
.box {
  text-align: center;
  overflow: hidden;
  margin: 20px 0 0 0;
  height: auto !important;
}
.box button {
  padding: 0 10px;
  margin: 0 10px;
  height: 40px;
  float: left;
  cursor: pointer;
  border: 1px solid #ebebeb;
  background-color: #ffffff;
}
.box .first-page,
.box .last-page {
  margin: 0;
}
.box .pageWrap {
  height: 40px;
  float: left;
  overflow: hidden;
}
.box .pageWrap ul {
  width: 100000px;
  height: 40px;
  float: left;
}
.box .pageWrap ul li {
  width: 60px;
  height: 40px;
  border: 1px solid #ebebeb;
  line-height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  float: left;
}
.box .pageWrap ul .sel-page {
  background-color: #E6E6FA;
}
.box .jump-text {
  width: 60px;
  height: 40px;
  box-sizing: border-box;
  text-align: center;
  margin: 0 5px;
  float: left;
}
.box .jump-button {
  margin: 0;
  float: left;
}
.box .total-pages,
.box .total-count {
  margin-left: 10px;
  float: left;
  font-size: 14px;
  padding-top: 11px;
}

当你在项目中引入了以上文件后,我们就可以开始使用了！如何使用呢？注意看插件源码的最后几行：

$.fn.paging = function(options) {
        return new Paging($(this), options);
  }

这里我们举个例子大家一看就明白了：

<div class="box">分页内容要显示的地方div>
<script>
    $(function(){
         var option={
            pageNo:  1, // 初始页码
            totalPages:  2, //总页数
            totalCount:  8, // 条目总数
            slideSpeed:  600, // 缓动速度
            jump:true, // 支持跳转
            callback: function(page) {
                //根据当前页查数据
                ......
            } // 回调函数
        }
        $(".box").paging(option)
    })
script>

设置好这些分页的基本参数后，显示的效果如下图

上面的代码大家不难看懂，这里简单介绍下回调函数。当我们点击首页、上下页或者具体页数时都会触发，并且返回当前页数，这点通过查看源码里的handles函数也可以看出。
将返回的页数参数这里为page，传入查询函数里(如果有查询条件，将查询条件一并传入)重新进行查询得到 对应数据。

基本的使用过程就是这样啦，只要熟悉分页的基本流程，使用起来还是很方便的。