python 進行後端分頁詳細代碼

時間 2019-11-17

標籤 python 進行後端分頁詳細代碼欄目 Python 简体版

原文原文鏈接

後端分頁

兩個接口html

思路：前端

　　1. 先獲得最大頁和最小頁數（1， 20） --》傳遞給前端，這樣前端就能夠知道有多少個頁數jquery

　　2. 經過傳遞頁數獲得當前頁對應數據庫的最大值和最小值ajax

　　3. 經過sql limit 獲得數據sql

class Pagination:
    """
    explain:
        obj = Pagination(1000, 20, 50)
        print(obj.start)
        print(obj.end)
        obj.item_pages --> 求分頁的頁碼
    all_item :need the query library to count
    """
    """
    all_item: 總count
    current_page: 你的頁數、
    appear_page： 每頁多少條數據
    """

    def __init__(self, all_item, current_page=1, appear_page=50):
        try:
            self.appear_page = appear_page
            self.int = int(current_page)
            self.all_item = all_item
            page = self.int
        except:
            self.all_item = 0
            page = 1
        if page < 1:
            page = 1

        all_pager, c = divmod(all_item, self.appear_page)
        if c > 0:
            all_pager += 1

        self.current_page = page
        self.all_pager = all_pager

    @property
    def start(self):
        return (self.current_page -1) * self.appear_page

    @property
    def end(self):
        return self.current_page * self.appear_page

    @property
    def item_pages(self):
        all_pager, c = divmod(self.all_item, self.appear_page)
        if c > 0:
            all_pager += 1
        return 1, all_pager+1


if __name__ == '__main__':
    obj = Pagination(1001)
    print(obj.start)
    print(obj.end)
    print(obj.item_pages)

前端分頁 --》數據一次性傳給前端，而後前端分頁

這個分頁的原文連接： https://blog.csdn.net/qq_25065257/article/details/78329755數據庫

可是，這段代碼有問題，當 numBtnCount: 4, 而且有21頁的時候，當前頁數爲18，則會出現22頁，這裏處理的不是很好，固然做者也有本身的思考，存在及合理，我還寫不出來呢後端

因此這裏 numBtnCount: 3 ,比較合適，尚未發現問題。app

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>pagination-nick</title>
        <style>
            button {
                padding: 5px;
                margin: 5px;
            }
            
            .active-nick {
                color: red;
            }
            
            input {
                width: 50px;
                text-align: center;
            }
        </style>
    </head>
 
    <body>
        <div class="pagination-nick"></div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            //定義一個分頁方法，可屢次調用
            function paginationNick(opt) {
                //參數設置
                var pager = {
                    paginationBox: '', //分頁容器-- 必填
                    mainBox: '', //內容盒子--必填
                    numBtnBox: '', //數字按鈕盒子-- 必填
                    btnBox: '', //按鈕盒子 --必填
                    ipt: '', //input class-- 必填
                    goBtn: '', //go btn class --必填
                    currentBtn: '', //當前按鈕class name --必填
                    pageCount: 6, //每頁顯示幾條數據
                    numBtnCount: 4, //當前頁左右兩邊各多少個數字按鈕
                    currentPage: 0, //當前頁碼data-page，首屏默認值
                    maxCount: 0, //ajax請求數據分紅的最大頁碼
                    data: [] //ajax請求的數據
                };
                pager = $.extend(pager, opt);
                //請求數據頁面跳轉方法
                function goPage(btn) {
                    //obj爲ajax請求數據
                    var obj = { other: {}, value: [
                        {"1": "1"},
                        {"2": "1"},
                        {"3": "1"},
                        {"4": "1"},
                        {"5": "1"},
                        {"16": "1"},
                        {"166": "1"},
                        {"134": "1"},
                        {"134": "1"},
                        {"13": "1"},
                        {"12": "1"},
                        {"123": "1"},
                        {"12": "1"},
                        {"17": "1"},
                        {"178": "1"},
                        {"14": "1"},
                        {"100": "1"},
                        {"101": "1"},
                        {"102": "1"},
                        {"103": "1"},
                        {"104": "1"},
                        {"105": "1"},
                        {"106": "1"},
                        {"107": "1"},
                        {"108": "1"},
                        {"109": "1"},
                        {"110": "1"},
                        {"111": "1"},
                        {"112": "1"},
                    ] };
                    //將展現的數據賦值給pager.data  (array)
                    pager.data = obj.value;
                    //設置ajax請求數據分紅的最大頁碼
                    pager.maxCount = pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) + 1 :
                        pager.data.length / pager.pageCount;
 
                    //                設置當前頁碼
                    if(!isNaN(btn)) { //數字按鈕
                        pager.currentPage = parseInt(btn);
                    } else {
                        switch(btn) {
                            case 'first':
                                pager.currentPage = 0;
                                break;
                            case 'prev':
                                if(pager.currentPage > 0) {
                                    --pager.currentPage;
                                }
                                break;
                            case 'next':
                                if(pager.currentPage + 1 < pager.maxCount) {
                                    ++pager.currentPage;
                                }
                                break;
                            case 'last':
                                pager.currentPage = pager.maxCount - 1;
                                break;
                        }
                    }
                    //建立數字按鈕
                    createNumBtn(pager.currentPage);
                    //賦值給頁碼跳轉輸入框的value，表示當前頁碼
                    $('.' + pager.btnBox + ' .' + pager.ipt).val(pager.currentPage + 1);
                    //              內容區填充數據
                    var arr = [],
                        str = '';
                    arr = pager.data.slice(pager.pageCount * pager.currentPage,
                        pager.data.length - pager.pageCount * (pager.currentPage + 1) > -1 ?
                        pager.pageCount * (pager.currentPage + 1) : pager.data.length);

                    // 這裏是控制頁面顯示內容div的地方
                    arr.forEach(function(v) {
                        str += '<div>' + v + '</div>';
                    });
                    $('.' + pager.mainBox).html(str);
                }
                //建立非數字按鈕和數據內容區
                function createOtherBtn() {
                    $('.' + pager.paginationBox).html('</div><div class="' + pager.mainBox + '"></div><div class="' + pager.btnBox + '"><button data-page="first" class="first-btn">首頁</button><button data-page="prev" class="prev-btn">上一頁</button><span class="' + pager.numBtnBox + '"></span><button data-page="next" class="next-btn">下一頁</button><input type="text" placeholder="請輸入頁碼" class="' + pager.ipt + '"><button class="' + pager.goBtn + '">肯定go</button><button data-page="last" class="last-btn">尾頁</button>');
                    //ipt value變化並賦值給go btn data-page
                    $('.' + pager.btnBox + ' .' + pager.ipt).change(function() {
                        if(!isNaN($(this).val())) { //是數字
                            if($(this).val() > pager.maxCount) { //限制value最大值，跳轉尾頁
                                $(this).val(pager.maxCount);
                            }
                            if($(this).val() < 1) { //限制value最小值，跳轉首頁
                                $(this).val(1);
                            }
                        } else { //非數字清空value
                            $(this).val('');
                        }
                        $('.' + pager.btnBox + ' .' + pager.goBtn).attr('data-page', $(this).val() ? $(this).val() - 1 : '');
                    });
                    //每一個btn綁定請求數據頁面跳轉方法
                    $('.' + pager.btnBox + ' button').each(function(i, v) {
                        $(this).click(function() {
                            //有值且不是上一次的頁碼時才調用
                            if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage) {
                                goPage(v.getAttribute('data-page'));
                            }
                        });
                    });
                }
                //建立數字按鈕
                function createNumBtn(page) {
                    //page是頁面index從0開始，這裏的page加減一要注意
                    var str = '';
                    if(pager.maxCount > pager.numBtnCount * 2) { //若最大頁碼數大於等於固定數字按鈕總數（pager.numBtnCount*2+1）時
                        //此頁左邊右邊各pager.numBtnCount個數字按鈕
                        if(page - pager.numBtnCount > -1) { //此頁左邊有pager.numBtnCount頁 page頁碼從0開始
                            for(var m = pager.numBtnCount; m > 0; m--) {
                                str += '<button data-page="' + (page - m) + '">' + (page - m + 1) + '</button>';
                            }
                        } else {
                            for(var k = 0; k < page; k++) {
                                str += '<button data-page="' + k + '">' + (k + 1) + '</button>';
                            }
                        }
                        str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                        if(pager.maxCount - page > 3) { //此頁右邊有pager.numBtnCount頁 page頁碼從0開始
                            for(var j = 1; j < pager.numBtnCount + 1; j++) {
                                str += '<button data-page="' + (page + j) + '">' + (page + j + 1) + '</button>';
                            }
                        } else {
                            for(var i = page + 1; i < pager.maxCount; i++) {
                                str += '<button data-page="' + i + '">' + (i + 1) + '</button>';
                            }
                        }
                        /*數字按鈕總數小於固定的數字按鈕總數pager.numBtnCount*2+1時，
                         這個分支，能夠省略*/
                        if(str.match(/<\/button>/ig).length < pager.numBtnCount * 2 + 1) {
                            str = '';
                            if(page < pager.numBtnCount) { //此頁左邊頁碼少於固定按鈕數時
                                for(var n = 0; n < page; n++) { //此頁左邊
                                    str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
                                }
                                str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                                for(var x = 1; x < pager.numBtnCount * 2 + 1 - page; x++) { //此頁右邊
                                    str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
                                }
                            }
                            if(pager.maxCount - page - 1 < pager.numBtnCount) {
                                for(var y = pager.numBtnCount * 2 - (pager.maxCount - page - 1); y > 0; y--) { //此頁左邊
                                    str += '<button data-page="' + (page - y) + '">' + (page - y + 1) + '</button>';
                                }
                                str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                                for(var z = page + 1; z < pager.maxCount; z++) { //此頁右邊
                                    str += '<button data-page="' + z + '">' + (z + 1) + '</button>';
                                }
                            }
                        }
                    } else {
                        str = '';
                        for(var n = 0; n < page; n++) { //此頁左邊
                            str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
                        }
                        str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                        for(var x = 1; x < pager.maxCount - page; x++) { //此頁右邊
                            str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
                        }
                    }
 
                    $('.' + pager.numBtnBox).html(str);
 
                    //每一個btn綁定請求數據頁面跳轉方法
                    $('.' + pager.numBtnBox + ' button').each(function(i, v) {
                        $(this).click(function() {
                            goPage(v.getAttribute('data-page'));
                        });
                    });
 
                    //按鈕禁用
                    $('.' + pager.btnBox + ' button').not('.' + pager.currentBtn).attr('disabled', false);
                    if(!page) { //首頁時
                        $('.' + pager.btnBox + ' .first-btn').attr('disabled', true);
                        $('.' + pager.btnBox + ' .prev-btn').attr('disabled', 'disabled');
                    }
                    if(page == pager.maxCount - 1) { //尾頁時
                        $('.' + pager.btnBox + ' .last-btn').attr('disabled', true);
                        $('.' + pager.btnBox + ' .next-btn').attr('disabled', true);
                    }
                }
 
                //首屏加載
                createOtherBtn(); //首屏加載一次非數字按鈕便可
                goPage(); //請求數據頁面跳轉知足條件按鈕點擊都執行，首屏默認跳轉到currentPage
            }
            //調用
            paginationNick({
                paginationBox: 'pagination-nick', //分頁容器--必填
                mainBox: 'main-box-nick', //內容盒子--必填
                numBtnBox: 'num-box-nick', //數字按鈕盒子-- 必填
                btnBox: 'btn-box-nick', //按鈕盒子 --必填
                ipt: 'page-ipt-nick', //input class-- 必填
                goBtn: 'go-btn-nick', //go btn class --必填
                currentBtn: 'active-nick' //當前按鈕class name --必填
            });
        </script>
    </body>
 
</html>

View Code

找到問題了 ide

169行有錯誤，以改正 --》當時做者寫的是3，應該改成paser.numBtnCount；函數

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>pagination-nick</title>
        <style>
            button {
                padding: 5px;
                margin: 5px;
            }
            
            .active-nick {
                color: red;
            }
            
            input {
                width: 50px;
                text-align: center;
            }
        </style>
    </head>
 
    <body>
        <div class="pagination-nick"></div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            //定義一個分頁方法，可屢次調用
            function paginationNick(opt) {
                //參數設置
                var pager = {
                    paginationBox: '', //分頁容器-- 必填
                    mainBox: '', //內容盒子--必填
                    numBtnBox: '', //數字按鈕盒子-- 必填
                    btnBox: '', //按鈕盒子 --必填
                    ipt: '', //input class-- 必填
                    goBtn: '', //go btn class --必填
                    currentBtn: '', //當前按鈕class name --必填
                    pageCount: 6, //每頁顯示幾條數據
                    numBtnCount: 4, //當前頁左右兩邊各多少個數字按鈕
                    currentPage: 0, //當前頁碼data-page，首屏默認值
                    maxCount: 0, //ajax請求數據分紅的最大頁碼
                    data: [] //ajax請求的數據
                };
                pager = $.extend(pager, opt);
                //請求數據頁面跳轉方法
                function goPage(btn) {
                    //obj爲ajax請求數據
                    var obj = { other: {}, value: [
                        {"1": "1"},
                        {"2": "1"},
                        {"3": "1"},
                        {"4": "1"},
                        {"5": "1"},
                        {"16": "1"},
                        {"166": "1"},
                        {"134": "1"},
                        {"134": "1"},
                        {"13": "1"},
                        {"12": "1"},
                        {"123": "1"},
                        {"12": "1"},
                        {"17": "1"},
                        {"178": "1"},
                        {"14": "1"},
                        {"100": "1"},
                        {"101": "1"},
                        {"102": "1"},
                        {"103": "1"},
                        {"104": "1"},
                        {"105": "1"},
                        {"106": "1"},
                        {"107": "1"},
                        {"108": "1"},
                        {"109": "1"},
                        {"110": "1"},
                        {"111": "1"},
                        {"112": "1"},
                    ] };
                    //將展現的數據賦值給pager.data  (array)
                    pager.data = obj.value;
                    //設置ajax請求數據分紅的最大頁碼
                    pager.maxCount = pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) + 1 :
                        pager.data.length / pager.pageCount;
 
                    //                設置當前頁碼
                    if(!isNaN(btn)) { //數字按鈕
                        pager.currentPage = parseInt(btn);
                    } else {
                        switch(btn) {
                            case 'first':
                                pager.currentPage = 0;
                                break;
                            case 'prev':
                                if(pager.currentPage > 0) {
                                    --pager.currentPage;
                                }
                                break;
                            case 'next':
                                if(pager.currentPage + 1 < pager.maxCount) {
                                    ++pager.currentPage;
                                }
                                break;
                            case 'last':
                                pager.currentPage = pager.maxCount - 1;
                                break;
                        }
                    }
                    //建立數字按鈕
                    createNumBtn(pager.currentPage);
                    //賦值給頁碼跳轉輸入框的value，表示當前頁碼
                    $('.' + pager.btnBox + ' .' + pager.ipt).val(pager.currentPage + 1);
                    //              內容區填充數據
                    var arr = [],
                        str = '';
                    arr = pager.data.slice(pager.pageCount * pager.currentPage,
                        pager.data.length - pager.pageCount * (pager.currentPage + 1) > -1 ?
                        pager.pageCount * (pager.currentPage + 1) : pager.data.length);

                    // 這裏是控制頁面顯示內容div的地方
                    arr.forEach(function(v) {
                        str += '<div>' + v + '</div>';
                    });
                    $('.' + pager.mainBox).html(str);
                }
                //建立非數字按鈕和數據內容區
                function createOtherBtn() {
                    $('.' + pager.paginationBox).html('</div><div class="' + pager.mainBox + '"></div><div class="' + pager.btnBox + '"><button data-page="first" class="first-btn">首頁</button><button data-page="prev" class="prev-btn">上一頁</button><span class="' + pager.numBtnBox + '"></span><button data-page="next" class="next-btn">下一頁</button><input type="text" placeholder="請輸入頁碼" class="' + pager.ipt + '"><button class="' + pager.goBtn + '">肯定go</button><button data-page="last" class="last-btn">尾頁</button>');
                    //ipt value變化並賦值給go btn data-page
                    $('.' + pager.btnBox + ' .' + pager.ipt).change(function() {
                        if(!isNaN($(this).val())) { //是數字
                            if($(this).val() > pager.maxCount) { //限制value最大值，跳轉尾頁
                                $(this).val(pager.maxCount);
                            }
                            if($(this).val() < 1) { //限制value最小值，跳轉首頁
                                $(this).val(1);
                            }
                        } else { //非數字清空value
                            $(this).val('');
                        }
                        $('.' + pager.btnBox + ' .' + pager.goBtn).attr('data-page', $(this).val() ? $(this).val() - 1 : '');
                    });
                    //每一個btn綁定請求數據頁面跳轉方法
                    $('.' + pager.btnBox + ' button').each(function(i, v) {
                        $(this).click(function() {
                            //有值且不是上一次的頁碼時才調用
                            if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage) {
                                goPage(v.getAttribute('data-page'));
                            }
                        });
                    });
                }
                //建立數字按鈕
                function createNumBtn(page) {
                    //page是頁面index從0開始，這裏的page加減一要注意
                    var str = '';
                    if(pager.maxCount > pager.numBtnCount * 2) { //若最大頁碼數大於等於固定數字按鈕總數（pager.numBtnCount*2+1）時
                        //此頁左邊右邊各pager.numBtnCount個數字按鈕
                        if(page - pager.numBtnCount > -1) { //此頁左邊有pager.numBtnCount頁 page頁碼從0開始
                            for(var m = pager.numBtnCount; m > 0; m--) {
                                str += '<button data-page="' + (page - m) + '">' + (page - m + 1) + '</button>';
                            }
                        } else {
                            for(var k = 0; k < page; k++) {
                                str += '<button data-page="' + k + '">' + (k + 1) + '</button>';
                            }
                        }
                        str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                        if(pager.maxCount - page > pager.numBtnCount) { //此頁右邊有pager.numBtnCount頁 page頁碼從0開始
                            for(var j = 1; j < pager.numBtnCount + 1; j++) {
                                str += '<button data-page="' + (page + j) + '">' + (page + j + 1) + '</button>';
                            }
                        } else {
                            for(var i = page + 1; i < pager.maxCount; i++) {
                                str += '<button data-page="' + i + '">' + (i + 1) + '</button>';
                            }
                        }
                        /*數字按鈕總數小於固定的數字按鈕總數pager.numBtnCount*2+1時，
                         這個分支，能夠省略*/
                        if(str.match(/<\/button>/ig).length < pager.numBtnCount * 2 + 1) {
                            str = '';
                            if(page < pager.numBtnCount) { //此頁左邊頁碼少於固定按鈕數時
                                for(var n = 0; n < page; n++) { //此頁左邊
                                    str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
                                }
                                str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                                for(var x = 1; x < pager.numBtnCount * 2 + 1 - page; x++) { //此頁右邊
                                    str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
                                }
                            }
                            if(pager.maxCount - page - 1 < pager.numBtnCount) {
                                for(var y = pager.numBtnCount * 2 - (pager.maxCount - page - 1); y > 0; y--) { //此頁左邊
                                    str += '<button data-page="' + (page - y) + '">' + (page - y + 1) + '</button>';
                                }
                                str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                                for(var z = page + 1; z < pager.maxCount; z++) { //此頁右邊
                                    str += '<button data-page="' + z + '">' + (z + 1) + '</button>';
                                }
                            }
                        }
                    } else {
                        str = '';
                        for(var n = 0; n < page; n++) { //此頁左邊
                            str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
                        }
                        str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                        for(var x = 1; x < pager.maxCount - page; x++) { //此頁右邊
                            str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
                        }
                    }
 
                    $('.' + pager.numBtnBox).html(str);
 
                    //每一個btn綁定請求數據頁面跳轉方法
                    $('.' + pager.numBtnBox + ' button').each(function(i, v) {
                        $(this).click(function() {
                            goPage(v.getAttribute('data-page'));
                        });
                    });
 
                    //按鈕禁用
                    $('.' + pager.btnBox + ' button').not('.' + pager.currentBtn).attr('disabled', false);
                    if(!page) { //首頁時
                        $('.' + pager.btnBox + ' .first-btn').attr('disabled', true);
                        $('.' + pager.btnBox + ' .prev-btn').attr('disabled', 'disabled');
                    }
                    if(page == pager.maxCount - 1) { //尾頁時
                        $('.' + pager.btnBox + ' .last-btn').attr('disabled', true);
                        $('.' + pager.btnBox + ' .next-btn').attr('disabled', true);
                    }
                }
 
                //首屏加載
                createOtherBtn(); //首屏加載一次非數字按鈕便可
                goPage(); //請求數據頁面跳轉知足條件按鈕點擊都執行，首屏默認跳轉到currentPage
            }
            //調用
            paginationNick({
                paginationBox: 'pagination-nick', //分頁容器--必填
                mainBox: 'main-box-nick', //內容盒子--必填
                numBtnBox: 'num-box-nick', //數字按鈕盒子-- 必填
                btnBox: 'btn-box-nick', //按鈕盒子 --必填
                ipt: 'page-ipt-nick', //input class-- 必填
                goBtn: 'go-btn-nick', //go btn class --必填
                currentBtn: 'active-nick' //當前按鈕class name --必填
            });
        </script>
    </body>
 
</html>

View Code

後端分頁，一個接口分頁，一個接口拿數據

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>pagination-nick</title>
        <style>
            button {
                padding: 5px;
                margin: 5px;
            }

            .active-nick {
                color: red;
            }

            input {
                width: 50px;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div class="pagination-nick"></div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            //定義一個分頁方法，可屢次調用
            function paginationNick(opt) {
                //參數設置
                var pager = {
                    paginationBox: '', //分頁容器-- 必填
                    mainBox: '', //內容盒子--必填
                    numBtnBox: '', //數字按鈕盒子-- 必填
                    btnBox: '', //按鈕盒子 --必填
                    ipt: '', //input class-- 必填
                    goBtn: '', //go btn class --必填
                    currentBtn: '', //當前按鈕class name --必填
                    pageCount: 15, //每頁顯示幾條數據
                    numBtnCount: 4, //當前頁左右兩邊各多少個數字按鈕
                    currentPage: 0, //當前頁碼data-page，首屏默認值
                    maxCount: 0, //ajax請求數據分紅的最大頁碼
                    data: [] //ajax請求的數據
                };
                pager = $.extend(pager, opt);
                //請求數據頁面跳轉方法
                function goPage(btn) {
                    //obj爲ajax請求數據

                    //將展現的數據賦值給pager.data  (array)

                    var page_item = [1, 21];

                    //設置ajax請求數據分紅的最大頁碼
                    pager.maxCount = page_item[1];

                    //                設置當前頁碼
                    if(!isNaN(btn)) { //數字按鈕
                        pager.currentPage = parseInt(btn);
                    } else {
                        switch(btn) {
                            case 'first':
                                pager.currentPage = 0;
                                break;
                            case 'prev':
                                if(pager.currentPage > 0) {
                                    --pager.currentPage;
                                }
                                break;
                            case 'next':
                                if(pager.currentPage + 1 < pager.maxCount) {
                                    ++pager.currentPage;
                                }
                                break;
                            case 'last':
                                pager.currentPage = pager.maxCount - 1;
                                break;
                        }
                    }
                    //建立數字按鈕
                    createNumBtn(pager.currentPage);
                    //賦值給頁碼跳轉輸入框的value，表示當前頁碼
                    $('.' + pager.btnBox + ' .' + pager.ipt).val(pager.currentPage + 1);

                    var NewcurrentPage = pager.currentPage + 1;
                    console.log(NewcurrentPage);
                    //              內容區填充數據 --> 這裏是後端獲取ajax的值, 而後填充到這裏, 能夠寫函數
                    var arr = [],
                        str = '';
                    arr = [1, 2, 3, 4, 5, 6];

                    // 這裏是控制頁面顯示內容div的地方
                    arr.forEach(function(v) {
                        str += '<div>' + v + '</div>';
                    });
                    $('.' + pager.mainBox).html(str);
                }
                //建立非數字按鈕和數據內容區
                function createOtherBtn() {
                    $('.' + pager.paginationBox).html('</div><div class="' + pager.mainBox + '"></div><div class="' + pager.btnBox + '"><button data-page="first" class="first-btn">首頁</button><button data-page="prev" class="prev-btn">上一頁</button><span class="' + pager.numBtnBox + '"></span><button data-page="next" class="next-btn">下一頁</button><input type="text" placeholder="請輸入頁碼" class="' + pager.ipt + '"><button class="' + pager.goBtn + '">肯定go</button><button data-page="last" class="last-btn">尾頁</button>');
                    //ipt value變化並賦值給go btn data-page
                    $('.' + pager.btnBox + ' .' + pager.ipt).change(function() {
                        if(!isNaN($(this).val())) { //是數字
                            if($(this).val() > pager.maxCount) { //限制value最大值，跳轉尾頁
                                $(this).val(pager.maxCount);
                            }
                            if($(this).val() < 1) { //限制value最小值，跳轉首頁
                                $(this).val(1);
                            }
                        } else { //非數字清空value
                            $(this).val('');
                        }
                        $('.' + pager.btnBox + ' .' + pager.goBtn).attr('data-page', $(this).val() ? $(this).val() - 1 : '');
                    });
                    //每一個btn綁定請求數據頁面跳轉方法
                    $('.' + pager.btnBox + ' button').each(function(i, v) {
                        $(this).click(function() {
                            //有值且不是上一次的頁碼時才調用
                            if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage) {
                                goPage(v.getAttribute('data-page'));
                            }
                        });
                    });
                }
                //建立數字按鈕
                function createNumBtn(page) {
                    //page是頁面index從0開始，這裏的page加減一要注意
                    var str = '';
                    if(pager.maxCount > pager.numBtnCount * 2) { //若最大頁碼數大於等於固定數字按鈕總數（pager.numBtnCount*2+1）時
                        //此頁左邊右邊各pager.numBtnCount個數字按鈕
                        if(page - pager.numBtnCount > -1) { //此頁左邊有pager.numBtnCount頁 page頁碼從0開始
                            for(var m = pager.numBtnCount; m > 0; m--) {
                                str += '<button data-page="' + (page - m) + '">' + (page - m + 1) + '</button>';
                            }
                        } else {
                            for(var k = 0; k < page; k++) {
                                str += '<button data-page="' + k + '">' + (k + 1) + '</button>';
                            }
                        }
                        str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                        if(pager.maxCount - page > pager.numBtnCount) { //此頁右邊有pager.numBtnCount頁 page頁碼從0開始
                            for(var j = 1; j < pager.numBtnCount + 1; j++) {
                                str += '<button data-page="' + (page + j) + '">' + (page + j + 1) + '</button>';
                            }
                        } else {
                            for(var i = page + 1; i < pager.maxCount; i++) {
                                str += '<button data-page="' + i + '">' + (i + 1) + '</button>';
                            }
                        }
                        /*數字按鈕總數小於固定的數字按鈕總數pager.numBtnCount*2+1時，
                         這個分支，能夠省略*/
                        if(str.match(/<\/button>/ig).length < pager.numBtnCount * 2 + 1) {
                            str = '';
                            if(page < pager.numBtnCount) { //此頁左邊頁碼少於固定按鈕數時
                                for(var n = 0; n < page; n++) { //此頁左邊
                                    str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
                                }
                                str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                                for(var x = 1; x < pager.numBtnCount * 2 + 1 - page; x++) { //此頁右邊
                                    str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
                                }
                            }
                            if(pager.maxCount - page - 1 < pager.numBtnCount) {
                                for(var y = pager.numBtnCount * 2 - (pager.maxCount - page - 1); y > 0; y--) { //此頁左邊
                                    str += '<button data-page="' + (page - y) + '">' + (page - y + 1) + '</button>';
                                }
                                str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                                for(var z = page + 1; z < pager.maxCount; z++) { //此頁右邊
                                    str += '<button data-page="' + z + '">' + (z + 1) + '</button>';
                                }
                            }
                        }
                    } else {
                        str = '';
                        for(var n = 0; n < page; n++) { //此頁左邊
                            str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
                        }
                        str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此頁
                        for(var x = 1; x < pager.maxCount - page; x++) { //此頁右邊
                            str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
                        }
                    }

                    $('.' + pager.numBtnBox).html(str);

                    //每一個btn綁定請求數據頁面跳轉方法
                    $('.' + pager.numBtnBox + ' button').each(function(i, v) {
                        $(this).click(function() {
                            goPage(v.getAttribute('data-page'));
                        });
                    });

                    //按鈕禁用
                    $('.' + pager.btnBox + ' button').not('.' + pager.currentBtn).attr('disabled', false);
                    if(!page) { //首頁時
                        $('.' + pager.btnBox + ' .first-btn').attr('disabled', true);
                        $('.' + pager.btnBox + ' .prev-btn').attr('disabled', 'disabled');
                    }
                    if(page == pager.maxCount - 1) { //尾頁時
                        $('.' + pager.btnBox + ' .last-btn').attr('disabled', true);
                        $('.' + pager.btnBox + ' .next-btn').attr('disabled', true);
                    }
                }

                //首屏加載
                createOtherBtn(); //首屏加載一次非數字按鈕便可
                goPage(); //請求數據頁面跳轉知足條件按鈕點擊都執行，首屏默認跳轉到currentPage
            }
            //調用
            paginationNick({
                paginationBox: 'pagination-nick', //分頁容器--必填
                mainBox: 'main-box-nick', //內容盒子--必填
                numBtnBox: 'num-box-nick', //數字按鈕盒子-- 必填
                btnBox: 'btn-box-nick', //按鈕盒子 --必填
                ipt: 'page-ipt-nick', //input class-- 必填
                goBtn: 'go-btn-nick', //go btn class --必填
                currentBtn: 'active-nick' //當前按鈕class name --必填
            });
        </script>
    </body>

</html>