jQuery封装的分页组件

前几天做了一个vue的组件分页，而现在需求是jquery的分页，我就根据我自己的需求写了一个。
在网上找了很久的基于jquery的分页封装，可是都不是我想要的结果，那么今天我就给大家看一下我的这个分页。
你可以自行改变内容代码来达到你的目的，例如：样式的问题，你就可以自行调整css样式。

1.看一下效果

2.下面就是具体介绍一下

（1）、首先是css样式（可自行调节）当然你页可以外链一个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;

        }

        .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代码（你可以在中设置许多需求， 例如：你不需要共有多少页，那么就就可以直接在就是代码中删除）

 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（具体参数有具体详解，你可已根据你的需求添加新的参数）

    <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，直接来看吧！）

 <!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>

• 最后，如有错误，请大家即使提出，我会及时改正
• 本人才疏学浅，请大家多多包涵！