原生js版分頁插件

時間 2019-11-16

原文原文鏈接

以前我在本身的博客裏發表了一篇用angularJs自定義指令實現的分頁插件，今天簡單改造了一下，改爲了原生JavaScript版本的分頁插件，能夠自定義一些簡單配置，特此記錄下來。若有不足之處，歡迎指出。javascript

須要購買阿里雲產品和服務的，點擊此連接領取優惠券紅包，優惠購買哦，領取後一個月內有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07css

本插件能夠自定義的功能：html

　　1. 可初始化每頁條數，以及從新選擇每頁條數java

　　2.自定義首末頁、上下頁按鈕的顯示內容（是：<<、 >>、 < 、 > 仍是：首頁、末頁、上一頁、下一頁）jquery

　　3.設置當前頁在必定範圍時，是否顯示省略號按鈕ajax

　　4.自定義當前頁按鈕與省略號按鈕之間顯示的數字按鈕的個數app

須要設置的參數以下：ide

　　pageSize: 10,           //每頁條數（不設置時，默認爲10）
　　prevPage: '上頁',      //上一頁按鈕顯示內容（不設置時，默認爲：<）
　　nextPage: '下頁',      //下一頁按鈕顯示內容（不設置時，默認爲：>）
　　firstPage: '首頁',      //首頁按鈕顯示內容（不設置時，默認爲：<<）
　　lastPage: '末頁',       //末頁按鈕顯示內容（不設置時，默認爲：>>）
　　degeCount: 4,         //當前頁先後兩邊可顯示的頁碼個數（不設置時，默認爲3）
　　ellipsis: true            //是否顯示省略號按鈕(不可點擊)（true:顯示，false:不顯示，不設置時，默認爲顯示）函數

這些設置項只須要在頁面加載時定義一個js對象，設置相應的參數，在建立Paging實例時，傳入該對象便可。固然也能夠不定義該參數對象，則在建立Paging實例時，需傳入空對象，此時就是默認設置。this

因爲本案例用ajax調用的接口是真實接口，返回的都是真實數據，因此在本博客的代碼中，我會把調用的接口地址和相關的請求頭信息隱藏。

本身實現的簡單小插件，把分頁部分的css樣式寫在了插件paging.js中，以動態建立style標籤的方式，加入到頁面中。

一、代碼部分：

1.一、插件 - paging.js

分頁的css樣式寫在插件中，動態建立style標籤，加載到頁面中。在該js中有一個Paging構造函數。在構造函數中有兩個參數，第一個是自定義分頁參數的js對象，第二個是回調函數。

在構造函數中有一個initPage()方法。用來渲染分頁DOM結構。頁碼點擊事件和選擇每頁條數的事件都寫在構造函數中，目前這樣感受確實很差，後續再改進。

代碼以下：

var tableStyle =
    ".page {font-size: 14px;background-color: transparent;width: 100%;height: 50px;line-height: 50px;display: none;}"+
    ".page .page-l select {width: 60px;height: 30px;}"+
    ".page .page-l .page-size-box {display: inline-block;margin-left: 20px;}"+
    ".page .page-r {float: right;padding-top: 10px;}"+
    ".page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;padding: 0;}"+
    ".page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;}"+
    ".page .page-r ul li a:hover {background-color: #f5f2f2;}"+
    ".page .page-r ul li:last-child {border-right: 1px solid #ccc;}"+
    ".page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #777;}"+
    ".page .page-r ul li a.active {background-color: #09aeb0;color: #fff;}"+
    ".page .page-r ul li span {display: block;height: 100%;padding:0 10px;color: #ccc;cursor: not-allowed;}"+
    ".page .page-r ul li span.ellipsis {cursor: default;}";

var styleNode = document.createElement('style');
styleNode.innerHTML = tableStyle;
var headNode = document.getElementsByTagName('head')[0];
headNode.appendChild(styleNode);

function Paging(paramsObj, callback) {
    this.pageSize = paramsObj.pageSize || 10;    //每頁條數（不設置時，默認爲10
    this.pageIndex = paramsObj.pageIndex || 1;    //當前頁碼
    this.totalCount = paramsObj.totalCount || 0;   //總記錄數
    this.totalPage = Math.ceil(paramsObj.totalCount / paramsObj.pageSize) || 0;     //總頁數
    this.prevPage = paramsObj.prevPage || '<';     //上一頁（不設置時，默認爲：<）
    this.nextPage = paramsObj.nextPage || '>';     //下一頁（不設置時，默認爲：>）
    this.firstPage = paramsObj.firstPage || '<<';     //首頁（不設置時，默認爲：<<）
    this.lastPage = paramsObj.lastPage || '>>';     //末頁（不設置時，默認爲：>>）
    this.degeCount = paramsObj.degeCount || 3;             //當前頁先後兩邊可顯示的頁碼個數（不設置時，默認爲3）
    this.ellipsis = paramsObj.ellipsis; //是否顯示省略號不可點擊按鈕（true：顯示，false：不顯示）
    this.ellipsisBtn = (paramsObj.ellipsis == true || paramsObj.ellipsis == null) ? '<li><span class="ellipsis">…</span></li>' : '';
    var that = this;

    $('#page_size').val(this.pageSize);
    callback && callback(this.pageIndex, this.pageSize);    //當即執行回調函數

    // 生成分頁DOM結構
    this.initPage = function (totalCount, totalPage, pageIndex) {
        this.totalCount = totalCount;
        this.totalPage = totalPage;
        this.pageIndex = pageIndex;
        var degeCount = this.degeCount;
        var pageHtml = '';  //總的DOM結構
        var tmpHtmlPrev = '';   //省略號按鈕前面的DOM
        var tmpHtmlNext = '';   //省略號按鈕後面的DOM
        var headHtml = ''; //首頁和上一頁按鈕的DOM
        var endHtml = '';   //末頁和下一頁按鈕的DOM
        if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){   //先後都須要省略號按鈕
            headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';

            endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';

            var count = degeCount;  //先後各自須要顯示的頁碼個數
            for(var i=0; i<count; i++){
                if(pageIndex != 1){
                    tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
                }
                tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                this.ellipsisBtn +
                tmpHtmlPrev +
                '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                this.ellipsisBtn +
                endHtml;
        }else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前面須要省略號按鈕，後面不須要
            headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';

            if(pageIndex == totalPage){ //若是當前頁就是最後一頁
                endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
                    '<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
            }else{  //當前頁不是最後一頁
                endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                    '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
            }

            var count = degeCount;  //前須要顯示的頁碼個數
            var countNext = totalPage - pageIndex;  //後須要顯示的頁碼個數
            if(pageIndex != 1){
                for(var i=0; i<count; i++){
                    tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
                }
            }
            for(var i=0; i<countNext; i++){
                tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                this.ellipsisBtn +
                tmpHtmlPrev +
                '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                endHtml;
        }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前面不須要，後面須要省略號按鈕
            if(pageIndex == 1){ //若是當前頁就是第一頁
                headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
                    '<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
            }else{  //當前頁不是第一頁
                headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                    '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
            }

            endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';

            var countPrev = pageIndex - 1;  //前須要顯示的頁碼個數
            var count = degeCount;  //後須要顯示的頁碼個數
            if(pageIndex != 1){
                for(var i=0; i<countPrev; i++){
                    tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
                }
            }
            for(var i=0; i<count; i++){
                tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                tmpHtmlPrev +
                '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                this.ellipsisBtn +
                endHtml;
        }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){   //先後都不須要省略號按鈕
            headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
            endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';

            if(totalPage == 1){ //若是總頁數就爲1
                headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
                    '<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
                endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
                    '<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
            }else{
                if(pageIndex == 1){ //若是當前頁就是第一頁
                    headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
                        '<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
                    endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                        '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
                }else if(pageIndex == totalPage){  //若是當前頁是最後一頁
                    headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                        '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
                    endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
                        '<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
                }
            }

            var countPrev = pageIndex - 1;  //前須要顯示的頁碼個數
            var countNext = totalPage - pageIndex;  //後須要顯示的頁碼個數
            if(pageIndex != 1){
                for(var i=0; i<countPrev; i++){
                    tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
                }
            }
            for(var i=0; i<countNext; i++){
                tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                tmpHtmlPrev +
                '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                endHtml;
        }
        $('#page_ul').html(pageHtml);
        $('#total_count').html(totalCount);
    };

    // 點擊頁碼（首頁、上一頁、下一頁、末頁、數字頁）
    $('#page_ul').on('click','a',function (e) {
        var _this = $(this);
        var idAttr = _this.attr('id');
        var className = _this.attr('class');
        if(idAttr == 'first_page'){ //若是是點擊的首頁
            that.pageIndex = 1;
        }else if(idAttr == 'prev_page'){    //若是點擊的是上一頁
            that.pageIndex = that.pageIndex == 1 ? that.pageIndex : that.pageIndex - 1 ;
        }else if(idAttr == 'next_page'){ //若是點擊的是下一頁
            that.pageIndex = that.pageIndex == that.totalPage ? that.pageIndex : parseInt(that.pageIndex) + 1;
        }else if(idAttr == 'last_page'){ //若是點擊的是末頁
            that.pageIndex = that.totalPage;
        }else if(className == 'page-number'){   //若是點擊的是數字頁碼
            that.pageIndex = _this.html();
        }
        callback && callback(that.pageIndex, that.pageSize);
    });

    // 改變每頁條數
    $('#page_size').change(function () {
        var _this = $(this);
        that.pageIndex = paramsObj.pageIndex = 1;
        that.pageSize = paramsObj.pageSize = _this.val() - 0;
        callback && callback(that.pageIndex, that.pageSize);
    })
}

1.二、index.html

只須要在建立Paging實例的時候，傳入設置項的js對象，而後在回調函數裏發送ajax請求獲取數據。回調函數裏須要傳入兩個形參，依次是當前頁碼和每頁條數。ajax請求的成功回調里根據接口返回的總條數，結合每頁條數計算出總頁數。再調用Paging實例的initPage()方法，傳入總條數、總頁數和當前頁碼，便可渲染出分頁的DOM結構了。

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js版分頁插件</title>
    <style>
        .data {
            width: 70%;
            margin: 0 auto;
        }
        .params {
            margin: 20px 0;
        }
        .params input {
            height: 30px;
            box-sizing: border-box;
        }
        .params .search-btn {
            float: right;
            width: 80px;
            border: 0 none;
            background-color: #666;
            color: #fff;
            font-size: 14px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }
        th, td {
            border: 1px solid #999;
            height: 26px;
            line-height: 26px;
        }
        .no-data {
            display: none;
            height: 80px;
            line-height: 80px;
            text-align: center;
            color: #aaa;
        }
    </style>
</head>
<body>
    <div class="data">
        <div class="params">
            <label for="course_id">用戶姓名：</label><input type="text" id="user_name">
            <input type="button" value="查詢" class="search-btn" id="search_btn">
        </div>
        <table>
            <thead>
                <tr>
                    <th>序號</th>
                    <th>用戶ID</th>
                    <th>姓名</th>
                    <th>建立時間</th>
                </tr>
            </thead>
            <tbody id="data_list"></tbody>
        </table>
        <div class="no-data">未查詢到數據</div>

        <!-- 分頁結構 -->
        <div class="page">
            <div class="page-l" id="page_l" style="float: left;">
                <span>總共 <span id="total_count"></span> 條</span>
                <div class="page-size-box">
                    <span>每頁顯示</span>
                    <select id="page_size">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>條
                </div>
            </div>
            <div class="page-r">
                <ul id="page_ul" class="page-ul"></ul>
            </div>
        </div>
    </div>

    <script src="../lib/jquery.js"></script>
    <script src="paging-bak.js"></script>
    <script>
        $(function () {

            //分頁參數（參數名固定不可變）
            var pageConfig = {
                pageSize: 10,                //每頁條數（不設置時，默認爲10）
                prevPage: '上頁',             //上一頁（不設置時，默認爲：<）
                nextPage: '下頁',             //下一頁（不設置時，默認爲：>）
                firstPage: '首頁',            //首頁（不設置時，默認爲：<<）
                lastPage: '末頁',             //末頁（不設置時，默認爲：>>）
                degeCount: 4,                //當前頁先後兩邊可顯示的頁碼個數（不設置時，默認爲3）
                ellipsis: true               //是否顯示省略號按鈕(不可點擊)（true:顯示，false:不顯示，不設置時，默認爲顯示）
            }
            getList();  //初始加載就查詢

            //點擊查詢按鈕
            $('#search_btn').click(function () {
                getList();
            })

            //查詢列表數據
            function getList() {
                //初始化Paging實例(pageConfig參數也能夠爲空對象，此時就是默認設置)
                var pageIng = new Paging(pageConfig, function (pageIndex, pageSize) {
                    var userName = $('#user_name').val();
                    $.ajax({
                        url:'http://******/getSysUserList.do', //這裏就不顯示接口地址
                        type:'get',
                        data:{
                            pageIndex: pageIndex,
                            pageSize: pageSize,
                            name: userName
                        },
                        success: function (res) {
                            if(res.success == 1){
                                if(res.data.length > 0){  //若是查詢到了數據
                                    var dataList = res.data;
                                    var html = '';
                                    dataList.forEach(function (item, i) {
                                        html += '<tr>'+
                                                    '<td style="width: 20%;">'+((pageIndex-1)*pageSize+i+1)+'</td>'+
                                                    '<td style="width: 20%;">'+item.id+'</td>'+
                                                    '<td style="width: 30%;">'+item.name+'</td>'+
                                                    '<td style="width: 30%;">'+item.createTime+'</td>'+
                                                '</tr>';
                                    });
                                    $('#data_list').html(html);
                                    var totalCount = res.totalCount;   //接口返回的總條數
                                    var totalPage = Math.ceil(totalCount / pageSize);   //根據總條數和每頁條數計算總頁碼數

                                    // 調用Paging實例的 initPage()方法生成分頁DOM結構
                                    pageIng.initPage(totalCount, totalPage, pageIndex);
                                    $('.page').show();
                                    $('.no-data').hide();
                                }else{  //若是未查詢到數據
                                    $('#data_list').html('');
                                    $('.page').hide();
                                    $('.no-data').show();
                                }
                            }else{
                                $('#data_list').html('');
                                $('.page').hide();
                                $('.no-data').show();
                            }
                        }
                    })
                });
            }
        })
    </script>
</body>
</html>