摘要:封装的分页组件前几天做了一个的组件分页,而现在需求是的分页,我就根据我自己的需求写了一个。在网上找了很久的基于的分页封装,可是都不是我想要的结果,那么今天我就给大家看一下我的这个分页。
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.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 = `共 ${this.settings.count} 条信息/共 ${this.settings.countPage} 页首页上一页
下一页尾页
(3)、初始化js(具体参数有具体详解,你可已根据你的需求添加新的参数)
(4)、html代码(封装好的js和css,直接来看吧!)
分页示例
最后,如有错误,请大家即使提出,我会及时改正
本人才疏学浅,请大家多多包涵!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52904.html
摘要:封装的分页组件前几天做了一个的组件分页,而现在需求是的分页,我就根据我自己的需求写了一个。在网上找了很久的基于的分页封装,可是都不是我想要的结果,那么今天我就给大家看一下我的这个分页。 jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个。在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我就...
摘要:封装的分页组件前几天做了一个的组件分页,而现在需求是的分页,我就根据我自己的需求写了一个。在网上找了很久的基于的分页封装,可是都不是我想要的结果,那么今天我就给大家看一下我的这个分页。 jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个。在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我就...
阅读 1952·2021-11-23 10:08
阅读 2297·2021-11-22 15:25
阅读 3232·2021-11-11 16:55
阅读 728·2021-11-04 16:05
阅读 2505·2021-09-10 10:51
阅读 685·2019-08-29 15:38
阅读 1534·2019-08-29 14:11
阅读 3453·2019-08-29 12:42