jquery分页插件
2016-03-23 12:36
621 查看
需要工具:jquery、jquery.page.js
jquery.page.js的代码如下:
在模板中引入
在中加入
使用方法:
一个漂亮的分页就出来了
jquery.page.js的代码如下:
(function($){ var ms = { init:function(obj,args){ return (function(){ ms.fillHtml(obj,args); ms.bindEvent(obj,args); })(); }, //填充html fillHtml:function(obj,args){ return (function(){ obj.empty(); //上一页 if(args.current > 1){ obj.append('<a href="javascript:;" class="prevPage">上一页</a>'); }else{ obj.remove('.prevPage'); obj.append('<span class="disabled">上一页</span>'); } //中间页码 if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>'); } if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ obj.append('<span>...</span>'); } var start = args.current -2,end = args.current+2; if((start > 1 && args.current < 4)||args.current == 1){ end++; } if(args.current > args.pageCount-4 && args.current >= args.pageCount){ start--; } for (;start <= end; start++) { if(start <= args.pageCount && start >= 1){ if(start != args.current){ obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>'); }else{ obj.append('<span class="current">'+ start +'</span>'); } } } if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ obj.append('<span>...</span>'); } if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>'); } //下一页 if(args.current < args.pageCount){ obj.append('<a href="javascript:;" class="nextPage">下一页</a>'); }else{ obj.remove('.nextPage'); obj.append('<span class="disabled">下一页</span>'); } })(); }, //绑定事件 bindEvent:function(obj,args){ return (function(){ obj.on("click","a.tcdNumber",function(){ var current = parseInt($(this).text()); ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current); } }); //上一页 obj.on("click","a.prevPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current-1); } }); //下一页 obj.on("click","a.nextPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ c782 args.backFn(current+1); } }); })(); } } $.fn.createPage = function(options){ var args = $.extend({ pageCount : 10, current : 1, backFn : function(){} },options); ms.init(this,args); } })(jQuery);
在模板中引入
<script src="../static/jquery-2.1.1.min.js"></script> <script src="../static/jquery.page.js"></script>
在中加入
<style> *{ margin:0; padding:0; list-style:none;} a{ text-decoration:none;} a:hover{ text-decoration:none;} .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;} .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} .tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} </style>
使用方法:
$(".tcdPageCode").createPage({ pageCount:{$totalPage},//总需要页数 current:{$page},//当前页 backFn:function(p){ location.href="payList?page="+p //点击页码触发事件 } });
一个漂亮的分页就出来了
相关文章推荐
- javascript 3D图片轮换
- html制作的日历
- 聊聊 Statsd 和 Collectd 那点事!
- ”2015年IT变革与热点技术研讨会“圆满结束!
- IBMX3400M3的服务器装系统后找不到硬盘 技术分享
- 分享技术赢大奖-我们是知识的搬运工【51CTO学院】
- 沙丁鱼-序
- “人工智能技术驱动下的机遇与挑战”技术分享会圆满成功!
- 源码编译安装LAMP环境部署Discuz
- 2016年Qcon值得关注的技术分享
- Android 不要错过的 7 个完整项目学习
- Android中使用ImageLoader加载图片
- HDG西安站|分享技术干货,打造开发者交流平台!
- Node.js区块链茶座第一期圆满结束
- 【北京】9月24日 NodeJS 区块链茶座·第一期:为什么一定要玩区块链?
- 挂黑链的十大方式
- 技术分享的好处
- 微信公众号平台开发(二)信息的分类.md
- 微信公众号平台开发(一)如何与微信后台对接
- 2T架构师教学视频打包分享