基于jquery的php分页,基于jQuery封装的分页组件
前言:
由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件。
思路:
主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果。
1.page.init.css
1 @charset "utf=8"; 2 *{ 3 box-sizing: border-box; 4 padding: 0; 5 margin: 0; 6 } 7 .page{ 8 font-size: 13px; 9 text-align: right;10 }11 .page .page_to{12 display: inline-block;13 max-width: 250px;14 }15 .page .page_to li{16 display: inline-block;17 width: auto;18 height: auto;19 border: 1px solid #ddd;20 padding:5px 10px;21 border-left-width: 0;22 color: #323232;23 cursor: pointer;24 }25 .page .page_to li.page_hide{26 display: none;27 }28 .page .page_to li:hover{29 color: #32C2CD;30 background-color: #f4f4f4;31 border-color: #DDDDDD;32 }33 .page .page_to li:first-child{34 border-left-width: 1px;35 }36 .page .page_jump{37 display: inline-block;38 width: 180px;39 }40 .page .page_jump input.page_jump_input{41 width: 52px;42 height: 28px;43 text-align: center;44 text-decoration: none;45 background-color: #fff;46 border: 1px solid #ddd;47 margin:0 4px;48 }49 .page .page_jump input.page_jump_btn{50 display: inline-block;51 padding: 7px 20px;52 margin-left: 5px;53 font-size: 14px;54 font-weight: 400;55 line-height: 1.42857143;56 text-align: center;57 white-space: nowrap;58 vertical-align: middle;59 -ms-touch-action: manipulation;60 touch-action: manipulation;61 cursor: pointer;62 -webkit-user-select: none;63 -moz-user-select: none;64 -ms-user-select: none;65 user-select: none;66 border: 1px solid transparent;67 border-radius: 4px;68 background-color: #00BB9C;69 color: #FFFFFF;70 font-weight: bold;71 }
2.pageInit.js
1 /** 2 * Created: 2017/6/20. 3 * author: Aaron 4 * address:
5 */ 6 (function($,window,undefined){ 7 8 var curPage='', 9 //跳转是否有值 10 jumpVal='', 11 //从DOM中重新获取数据总数/总页数 12 lists='', 13 totals='', 14 //是否返回值 15 isTrue=false; 16 17 var Page=function(opts){ 18 this.settings= $.extend({},Page.defaults,opts); 19 curPage=this.settings.initPage; 20 totals=this.settings.totalPages; 21 jumpVal=this.settings.inputVal; 22 this.init(); 23 }; 24 25 //默认配置 26 Page.defaults={ 27 container:'.page', 28 setPos:'body', 29 totalPages:null, 30 totalLists:null, 31 initPage:1, 32 inputVal:1, 33 callBack:null 34 }; 35 36 Page.prototype={ 37 init:function(){ 38 this.create(); 39 }, 40 create:function(){ 41 var _template='
- '+ 49 '
- 首页'+ 50 '
- « 上一页'+ 51 '
- 下一页 »'+ 52 '
- 末页'+ 53 '
'+ 54 '
'+ 55 '
'+ 59 '
'; 60 $(this.settings.setPos).append(_template); 61 this.refreshDom(); 62 this.bindEvent(); 63 }, 64 bindEvent:function(){ 65 var _this=this; 66 //跳转首页 67 $(this.settings.container).on("click",".page_first",function(){ 68 69 lists=$(_this.settings.container).find(".page_num").text(); 70 totals=$(_this.settings.container).find(".page_size").text(); 71 72 if($.isFunction(_this.settings.callBack)){ 73 curPage=1; 74 isTrue=_this.settings.callBack(1); 75 if(isTrue){ 76 _this.refreshDom(); 77 $(_this.settings.container).find(".page_current").text(1); 78 $(_this.settings.container).find(".page_jump_input").val(curPage); 79 } 80 } 81 }); 82 //跳转上一页 83 $(this.settings.container).on("click",".page_pre",function(){ 84 85 lists=$(_this.settings.container).find(".page_num").text(); 86 totals=$(_this.settings.container).find(".page_size").text(); 87 88 if($.isFunction(_this.settings.callBack)){ 89 if(curPage>1){ 90 curPage=curPage-1; 91 isTrue=_this.settings.callBack(curPage); 92 if(isTrue){ 93 _this.refreshDom(); 94 $(_this.settings.container).find(".page_current").text(curPage); 95 $(_this.settings.container).find(".page_jump_input").val(curPage); 96 } 97 } 98 } 99 });100 //跳转下一页101 $(this.settings.container).on("click",".page_next",function(){102 103 lists=$(_this.settings.container).find(".page_num").text();104 totals=$(_this.settings.container).find(".page_size").text();105 106 107 if($.isFunction(_this.settings.callBack)){108 if(curPage=1 && jumpVal <=totals){145 curPage=jumpVal;146 isTrue=_this.settings.callBack(curPage);147 if(isTrue){148 _this.refreshDom();149 $(_this.settings.container).find(".page_current").text(curPage);150 }151 }else{152 jumpVal=curPage;153 }154 }155 });156 },157 refreshDom:function(){158 $(this.settings.container).find("li.flex_child").removeClass("page_hide");159 if(Number(totals)==1){160 $(this.settings.container).find(".page_pre").addClass("page_hide");161 $(this.settings.container).find(".page_next").addClass("page_hide");162 }163 else if(Number(totals)==2){164 if(Number(curPage)==1){165 $(this.settings.container).find(".page_pre").addClass("page_hide");166 }else{167 $(this.settings.container).find(".page_next").addClass("page_hide");168 }169 }170 else if(Number(curPage)==1 && Number(totals)>2){171 $(this.settings.container).find(".page_pre").addClass("page_hide");172 }173 else if(Number(curPage)==Number(totals) && Number(totals)>2){174 $(this.settings.container).find(".page_next").addClass("page_hide");175 }176 }177 };178 179 var pageInit=function(opts){180 return new Page(opts);181 };182 183 window.pageInit= $.pageInit=pageInit;184 185 })(jQuery,window,undefined);
3.组件调用
通过 window.pageInit= $.pageInit=pageInit 可完成分页组件初始化。
暴露出来的接口分别为:
1.container:DOM的容器,默认.page
2.setPos:DOM放置的HTML位置,默认body
3.totalPages:默认的页数,必填,默认null
4.totalLists:默认的数据总数,必填,默认null
5.initPage:当前页,默认第一页
6.inputVal:跳转页,默认第一页
7.callBack:执行的回调函数,必填,默认null
1 2 3
4 5 基于jQuery封装的分页组件 6 7 8 9 10 11 29 30
效果:
通过callBack接口,添加自己所需要执行的function函数,并且需要return true时才回执行动态的DOM渲染。
基于jquery的php分页,基于jQuery封装的分页组件相关推荐
- 前端分页功能(封装好的组件)
1. 封装好的分页组件 //页码 <template><!-- 页码 --><div class="page"><el-paginatio ...
- phppage类封装分页功能_封装page分页类
类: //分页工具类 class Page{ /* * 获取分页字符串 * @param1 string $uri,分页要请求的脚本url * @param3 int $counts,总记录数 * @ ...
- jQuery:收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
- php面向对象分页,PHP基于面向对象封装的分页类示例
本文实例讲述了php基于面向对象封装的分页类.分享给大家供大家参考,具体如下: class page { protected $num;//每页显示条数 protected $total;//总记录数 ...
- html5 倒计时插件,基于HTML5 time元素的倒计时jquery插件
这是一款简单的基于HTML5 time元素的倒计时jquery插件.该jquery倒计时插件提供默认的翻牌样式,可以在所有支持HTML5 time元素的浏览器中正常工作. 安装 可以通过npm来安装j ...
- Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据.实现分页和查询功能 一.部分技术选型 二.项目结构 三.功能需求和效果展示 四.关键代码 4.1页 ...
- android sqlite 操作类封装,SQLiteUtils 一个简单的基于 Android 的 Sqlite 数据库的操作封装库 @codeKK Android开源站...
一个简单的基于 Android 的 Sqlite 数据库的操作封装,它有如下的好处: 便捷地创建表和增添表字段 通过操作对象来 insert 或者 update 表记录 支持多种查询方式,支持分页查询 ...
- 基于 Mui 封装常用 React 组件
基于 Mui 封装常用 React 组件 Mui(MaterialUI) Mui 是基于google的Materia设计风格开发的基于React框架的 UI 框架,之前的名称为MaterialUI. ...
- 锋利的js前端分页之jQuery
原文:锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的 ...
最新文章
- C++ 内连接与外连接 (转)
- 【NOIP2013模拟】小喵喵的新家
- render在python中的含义_python-/ render()上的Django TypeError获得了意外的...
- C语言删除链表的算法(附完整源码)
- oracle EBS grant 您不具有执行当前操作的足够权限。请与您的系统管理员联系。...
- 前端学习(3106):react-hello-jsx小练习
- 【mysql的设计与优化专题(6)】mysql索引攻略
- 关于数据权限的几个问题
- PSIM软件学习---03 电路的创建与仿真
- mac10.11重装php,macosx-10.11-更新osx10.11后,删除自带php版本,重新编译php5.5.29,到make阶段提示错误。...
- JS 学习笔记--8---Function类型
- c# 中实用包,实用dll。
- SHIFT-JIS编码范围
- Lingo 软件的使用 数学建模 司守奎
- 模拟投硬币,一次一投
- 重组人骨形态发生蛋白-2(BMP 2)的研究意义
- Redis 集群可用性测试
- x86 Kylin V10系统安装kvm并创建虚拟机
- [codeforces1139C]Edgy Trees
- visual basic 6 下载 和 Vb6sp6 下载
热门文章
- 【PC工具】推荐在线流程图绘制工具,免费云存储流程图绘制,可直接粘贴图片...
- 内核中修改和保存defconfig的方法
- 'mysql' 不是内部或外部命令,也不是可运行的程序或批处理文件
- 对MVC、MVP、MVVM的理解
- The Best Way to Export an SVG from Sketch
- sts从mysql数据库中反向生成实体类
- POJ 1703 Find them, Catch them
- 在 Lotus Notes 中设置邮件定时发送的方法及代理功能介绍
- 用.XML填充TreeView
- 祝大家元宵节快乐,吃好喝好哦~~