资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/基于jQuery封装的分页组件（可自定义设置）

基于jQuery封装的分页组件（可自定义设置）

lmxdawn / 1179人阅读

摘要：封装的分页组件前几天做了一个的组件分页，而现在需求是的分页，我就根据我自己的需求写了一个。在网上找了很久的基于的分页封装，可是都不是我想要的结果，那么今天我就给大家看一下我的这个分页。

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 = `

    

        共 ${this.settings.count} 条信息/共 ${this.settings.countPage} 页
        

         

            
首页

            
上一页

            

                
    
                

            

            
下一页

            
尾页

        

        

            
            页
            跳转
        

    
`;
    $(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 = `    
  • ${i}
    • `;
                } else {
                pageHtml = `    
  • ${i}
    • `;
                }
            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 = `    
  • ${i}
    • `;
                } else {
                    pageHtml = `    
  • ${i}
    • `;
                }
            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 = `    
  • ${i}
    • `;
                } else {
                    pageHtml = `    
  • ${i}
    • `;
                }
            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（具体参数有具体详解，你可已根据你的需求添加新的参数）

    （4）、html代码（封装好的js和css，直接来看吧！）

     
  

    
    
    分页示例

    最后，如有错误，请大家即使提出，我会及时改正

    本人才疏学浅，请大家多多包涵！

    GPU云服务器 云服务器 可自定义大小 html的分页 jstl的分页 存储过程的分页

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/113774.html

    相关文章

    • 基于jQuery封装的分页组件（可自定义设置）

      摘要：封装的分页组件前几天做了一个的组件分页，而现在需求是的分页，我就根据我自己的需求写了一个。在网上找了很久的基于的分页封装，可是都不是我想要的结果，那么今天我就给大家看一下我的这个分页。 jQuery封装的分页组件 前几天做了一个vue的组件分页，而现在需求是jquery的分页，我就根据我自己的需求写了一个。在网上找了很久的基于jquery的分页封装，可是都不是我想要的结果，那么今天我就...

      zhisheng 评论0 收藏0

    • 基于jQuery封装的分页组件（可自定义设置）

      摘要：封装的分页组件前几天做了一个的组件分页，而现在需求是的分页，我就根据我自己的需求写了一个。在网上找了很久的基于的分页封装，可是都不是我想要的结果，那么今天我就给大家看一下我的这个分页。 jQuery封装的分页组件 前几天做了一个vue的组件分页，而现在需求是jquery的分页，我就根据我自己的需求写了一个。在网上找了很久的基于jquery的分页封装，可是都不是我想要的结果，那么今天我就...

      wenzi 评论0 收藏0

    • 常用的CSS框架

      摘要：常用的框架之前在写自己的个人网站的时候，由于自己前端不是特别好，于是就去找相关的框架来搭建页面了。找到以下这么一篇文章列出了很多常用的框架本篇主要是记录我用过的框架，并把之前写过的笔记进行整合一下。 常用的CSS框架 之前在写自己的个人网站的时候，由于自己Web前端不是特别好，于是就去找相关的CSS框架来搭建页面了。 找到以下这么一篇文章(列出了很多常用的CSS框架)： http://...

      Alfred 评论0 收藏0

    • 常用的CSS框架

      摘要：常用的框架之前在写自己的个人网站的时候，由于自己前端不是特别好，于是就去找相关的框架来搭建页面了。找到以下这么一篇文章列出了很多常用的框架本篇主要是记录我用过的框架，并把之前写过的笔记进行整合一下。 常用的CSS框架 之前在写自己的个人网站的时候，由于自己Web前端不是特别好，于是就去找相关的CSS框架来搭建页面了。 找到以下这么一篇文章(列出了很多常用的CSS框架)： http://...

      kk_miles 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    lmxdawn

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <