JQuery分頁插件使用心得

在修改别人的背景代碼的時候發現其使用的一款分頁插件，于是看了其源代碼學習了一下，并将使用的心得整理了一下。

- 插件的源代碼如下:

(function($, window, document) {
    // 定義構造函數
    function Paging(el, options) {
        this.el = el;
        this.options = {
            pageNo: options.initPageNo || , // 初始頁碼
            totalPages: options.totalPages || , //總頁數
            totalCount: options.totalCount || '', // 條目總數
            slideSpeed: options.slideSpeed || , // 緩動速度
            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 = , // li的寬度
                totalPages = that.options.totalPages, // 總頁數
                wrapLength = ;
            totalPages >  ? wrapLength =  * liWidth : wrapLength = totalPages * liWidth;
            for (var i = ; i <= that.options.totalPages; i++) {
                i !=  ? ulDom += '<li>' + i + '</li>' : ulDom += '<li class="sel-page">' + i + '</li>';
            }
            that.options.jump ? jumpDom = '<input type="text" placeholder="1" class="jump-text" id="jumpText"><button type="button" class="jump-button" id="jumpBtn">跳轉</button>' : jumpDom = '';
            content = '<button type="button" id="firstPage" class="turnPage first-page">首頁</button>' +
                '<button class="turnPage" id="prePage">上一頁</button>' +
                '<div class="pageWrap" style="width:' + wrapLength + 'px">' +
                '<ul id="pageSelect" style="transition:all ' + that.options.slideSpeed + 'ms">' +
                ulDom +
                '</ul></div>' +
                '<button class="turnPage" id="nextPage">下一頁</button>' +
                '<button type="button" id="lastPage" class="last-page">尾頁</button>' +
                jumpDom +
                '<p class="total-pages">共&nbsp;' +
                that.options.totalPages +
                '&nbsp;頁</p>' +
                '<p class="total-count">' +
                that.options.totalCount +
                '</p>';
            that.el.html(content);
        },
        bindEvents: function() {
            var that = this,
                pageSelect = $('#pageSelect'), // ul
                lis = pageSelect.children(), // li的集合
                liWidth = lis[].offsetWidth, // li的寬度
                totalPages = that.options.totalPages, // 總頁數
                pageIndex = that.options.pageNo, // 目前選擇的頁碼
                distance = , // ul移動距離
                prePage = $('#prePage'),
                nextPage = $('#nextPage'),
                firstPage = $('#firstPage'),
                lastPage = $('#lastPage'),
                jumpBtn = $('#jumpBtn'),
                jumpText = $('#jumpText');
            prePage.on('click', function() {
                pageIndex--;
                if (pageIndex < ) pageIndex = ;
                handles(pageIndex);
            })

            nextPage.on('click', function() {
                pageIndex++;
                if (pageIndex > lis.length) pageIndex = lis.length;
                handles(pageIndex);
            })

            firstPage.on('click', function() {
                pageIndex = ;
                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 >=  && jumpNum <= totalPages) {
                    pageIndex = jumpNum;
                    handles(pageIndex);
                    jumpText.val(jumpNum);
                }
            })

            lis.on('click', function() {
                pageIndex = $(this).index() + ;
                handles(pageIndex);
            })

            function handles(pageIndex) {
                lis.removeClass('sel-page').eq(pageIndex - ).addClass('sel-page');
                if (totalPages <= ) {
                    that.options.callback(pageIndex);
                    return false;
                }
                if (pageIndex >=  && pageIndex <= totalPages - ) distance = (pageIndex - ) * liWidth;
                if (pageIndex ==  || pageIndex == ) distance = ;
                if (pageIndex > totalPages - ) distance = (totalPages - ) * liWidth;
                pageSelect.css('transform', 'translateX(' + (-distance) + 'px)');
                pageIndex ==  ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false);
                pageIndex ==  ? 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: ;
  padding: ;
  list-style: none;
}
.fl {
  float: left;
}
.box {
  text-align: center;
  overflow: hidden;
  margin: px   ;
  height: auto !important;
}
.box button {
  padding:  px;
  margin:  px;
  height: px;
  float: left;
  cursor: pointer;
  border: px solid #ebebeb;
  background-color: #ffffff;
}
.box .first-page,
.box .last-page {
  margin: ;
}
.box .pageWrap {
  height: px;
  float: left;
  overflow: hidden;
}
.box .pageWrap ul {
  width: px;
  height: px;
  float: left;
}
.box .pageWrap ul li {
  width: px;
  height: px;
  border: px solid #ebebeb;
  line-height: px;
  box-sizing: border-box;
  cursor: pointer;
  float: left;
}
.box .pageWrap ul .sel-page {
  background-color: #E6E6FA;
}
.box .jump-text {
  width: px;
  height: px;
  box-sizing: border-box;
  text-align: center;
  margin:  px;
  float: left;
}
.box .jump-button {
  margin: ;
  float: left;
}
.box .total-pages,
.box .total-count {
  margin-left: px;
  float: left;
  font-size: px;
  padding-top: px;
}
           

當你在項目中引入了以上檔案後,我們就可以開始使用了！如何使用呢？注意看插件源碼的最後幾行：

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

這裡我們舉個例子大家一看就明白了：

<div class="box">分頁内容要顯示的地方</div>
<script>
    $(function(){
         var option={
            pageNo:  , // 初始頁碼
            totalPages:  , //總頁數
            totalCount:  , // 條目總數
            slideSpeed:  , // 緩動速度
            jump:true, // 支援跳轉
            callback: function(page) {
                //根據目前頁查資料
                ......
            } // 回調函數
        }
        $(".box").paging(option)
    })
</script>
           

設定好這些分頁的基本參數後，顯示的效果如下圖

上面的代碼大家不難看懂，這裡簡單介紹下回調函數。當我們點選首頁、上下頁或者具體頁數時都會觸發，并且傳回目前頁數，這點通過檢視源碼裡的handles函數也可以看出。

将傳回的頁數參數這裡為page，傳入查詢函數裡(如果有查詢條件，将查詢條件一并傳入)重新進行查詢得到 對應資料。

基本的使用過程就是這樣啦，隻要熟悉分頁的基本流程，使用起來還是很友善的。