基於jQuery封裝的分頁組件（可自定義設置）

時間 2019-12-05

原文原文鏈接

jQuery封裝的分頁組件

前幾天作了一個vue的組件分頁，而如今需求是jquery的分頁，我就根據我本身的需求寫了一個。
在網上找了好久的基於jquery的分頁封裝，但是都不是我想要的結果，那麼今天我就給你們看一下個人這個分頁。
你能夠自行改變內容代碼來達到你的目的，例如：樣式的問題，你就能夠自行調整css樣式。javascript

1.看一下效果css

2.下面就是具體介紹一下html

（1）、首先是css樣式（可自行調節）固然你頁能夠外鏈一個css，最後會有總體的代碼展現！vue

body,
        html {
            width: 100%;
            height: 100%;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .page {
            width: 100%;
            margin: 100px auto;
            height: 34px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pages {
            /*width: 80%;*/
            display: block;
            height: 34px;
            position: relative;
            text-align: center;
            overflow: hidden;
        }
        
        .all_data {
            color: #6699FF;
        }
        
        .all_pages {
            color: #6699FF;
        }
        
        .page_left {
            width: 200px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            text-align: center;
        }
        
        .page_footer {
            width: 180px;
            height: 35px;
            position: relative;
            margin-left: 24px;
        }
        
        .page_cont>div {
            display: block;
            position: relative;
            float: left;
            line-height: 32px;
            text-align: center;
        }
        
        .hometrailer {
            width: 64px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: #E3E3E3 1px solid;
            cursor: pointer;
        }
        
        .updown {
            width: 84px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: #E3E3E3 1px solid;
            cursor: pointer;
        }
        
        .page_view {
            height: 32px;
            position: relative;
        }
        
        .page_view ul {
            overflow: hidden;
        }
        
        .li {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            color: #666;
            float: left;
            list-style: none;
            margin-left: 8px;
            border: #E3E3E3 1px solid;
            cursor: pointer;
        }
        
        .active {
            background: rgba(96, 129, 255, 1)!important;
            color: #fff !important;
        }
        
        .pages>div {
            display: block;
            float: left;
            line-height: 32px;
            text-align: center;
        }
        
        .page_input {
            display: inline-block;
            width: 64px;
            height: 30px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: #E3E3E3 1px solid;
            outline: none;
            font-size: 14px;
            text-align: center;
        }
        
        .page_btn {
            display: inline-block;
            width: 84px;
            height: 32px;
            background: rgba(96, 129, 255, 1);
            border-radius: 3px;
            color: #fff;
            line-height: 32px;
            text-align: center;
            font-size: 14px;
        }
        
        .page_home {
            margin-right: 8px;
        }
        
        .page_trailer {
            margin-left: 8px;
        }
        
        .page_down {
            margin-left: 8px;
            w
        }
        
        .page_down_two {
            margin-left: 8px;
        }

（2）、js代碼（你能夠在中設置許多需求，例如：你不須要共有多少頁，那麼就就能夠直接在就是代碼中刪除）java

function Page(settings) {
   this.settings = settings;
   this.init();
}
//默認配置
Page.prototype = {
    init: function() {
    this.create();
},
create: function() {
   var _template = `<div class="pages">
    <div class="page_left">
        共 <span class="all_data">${this.settings.count}</span> 條信息/共 <span class="all_pages">${this.settings.countPage}</span> 頁
        </div>
         <div class="page_cont">
            <div class="hometrailer page_home">首頁</div>
            <div class="updown page_up">上一頁</div>
            <div class="page_view">
                <ul class="page_view_ul">
                </ul>
            </div>
            <div class="updown page_down">下一頁</div>
            <div class=" hometrailer page_trailer">尾頁</div>
        </div>
        <div class="page_footer">
            <input type="text" class="page_input" />
            <span>頁</span>
            <span class="page_btn">跳轉</span>
        </div>
    </div>`;
    $(this.settings.container).append(_template);
    this.refreshDom(this.settings);
    this.bindEvent();
    },
bindEvent: function() {
    var _this = this;
        //跳轉首頁
    $(this.settings.container).on("click", ".page_home", function() {
        var newpages = 1;
        _this.settings.nowPage = newpages;
        _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    });
    //跳轉上一頁
    $(this.settings.container).on("click", ".page_up", function() {
        var newpages = _this.settings.nowPage;
        newpages--;
        if(newpages < 1) {
            newpages = 1
            _this.settings.nowPage = newpages
        } else {
            _this.settings.nowPage = newpages
        }
    _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    });
    //跳轉下一頁
    $(this.settings.container).on("click", ".page_down", function() {
        var newpages = _this.settings.nowPage;
        newpages++;
        if(newpages > _this.settings.countPage) {
            newpages = _this.settings.countPage
            _this.settings.nowPage = newpages
        } else {
            _this.settings.nowPage = newpages
        }
        _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    });
    //跳轉末頁
    $(this.settings.container).on("click", ".page_trailer", function() {
        var newpages = _this.settings.countPage;
        _this.settings.nowPage = newpages;
        _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    });
    //Go跳轉
    $(this.settings.container).on("click", ".page_btn", function() {
        var inputText = $(".page_input").val() - 0;
        if(inputText < 1 || inputText > _this.settings.countPage) {
            alert("輸入的頁面不正確，請從新輸入")
        } else {
            _this.settings.nowPage = inputText;
            _this.settings.callBack(_this.settings.nowPage)
            _this.refreshDom(this.settings);
            //                establish(objpage);
            //外部的ajax
        }
        });
    },
    refreshDom: function() {
        var _this = this;
        $(".li").remove();
        var countPage = this.settings.countPage;
        var showPageCount = this.settings.showPageCount;
        var nowPage = this.settings.nowPage - 0;
        var count = this.settings.count;
        var bian = (showPageCount - 1) / 2;
        $(".all_data").html(count);
        $(".all_pages").html(countPage);
        var html = "";
        if(nowPage - bian <= 0) {
            for(var i = 1; i < showPageCount + 1; i++) {
                var index = i;
                if(nowPage == index) {
                pageHtml = `    <li index="${i}" class="li active">${i}</li>`;
                } else {
                pageHtml = `    <li  index="${i}" class="li">${i}</li>`;
                }
            html += pageHtml;
            }
        } else if(nowPage - bian > 0 && nowPage + bian < countPage) {
            var num = nowPage - bian;
            for(var i = num; i < (num + showPageCount); i++) {
                var index = i;
                if(nowPage == index) {
                    pageHtml = `    <li index="${i}" class="li active">${i}</li>`;
                } else {
                    pageHtml = `    <li  index="${i}" class="li">${i}</li>`;
                }
            html += pageHtml;
            }

        } else if(nowPage + bian >= countPage) {
            var numAll = countPage - showPageCount + 1;
            for(var i = numAll; i < (numAll + showPageCount); i++) {
                var index = i;
                if(nowPage == index) {
                    pageHtml = `    <li index="${i}" class="li active">${i}</li>`;
                } else {
                    pageHtml = `    <li  index="${i}" class="li">${i}</li>`;
                }
            html += pageHtml;
        }
    }

    $(".page_view_ul").append(html)

    $(".li").click(function() {
        _this.settings.nowPage = $(this).attr("index")-0;
            _this.settings.callBack(_this.settings.nowPage)
        _this.refreshDom(this.settings);
    })
    }
};
    var pageInit = function(opts) {
        return new Page(opts);
    };

    window.pageInit = $.pageInit = pageInit;

（3）、初始化js（具體參數有具體詳解，你可已根據你的需求添加新的參數）jquery

<script type="text/javascript">
        $.pageInit({
            container: '.page', //容器：默認page
            countPage: 20, //一共有多少頁
            showPageCount: 5, //顯示多少個分頁按鈕
            nowPage: 1, //當前是第幾頁
            count: 100, //數據總數
            callBack: function(data) {
                console.log("data___________")
                //當前的頁碼
                console.log("當前的頁碼爲："+data)
            }
        });
    </script>

（4）、html代碼（封裝好的js和css，直接來看吧！）ajax

<!DOCTYPE html>
  <html>

    <head>
    <meta charset="UTF-8">
    <title>分頁示例</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .page {
            width: 100%;
            margin: 100px auto;
            height: 34px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/page.css" />
    </head>
    <body>
        <div class="page">

        </div>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/page.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $.pageInit({
                container: '.page', //容器：默認page
                countPage: 20, //一共有多少頁
                showPageCount: 5, //顯示多少個分頁按鈕
                nowPage: 1, //當前是第幾頁
                count: 100, //數據總數
                callBack: function(data) {
                    console.log("data___________")
                    //當前的頁碼
                  console.log("當前的頁碼爲："+data)
                }
            });
        </script>
    </body>

 </html>