jquery.page.js实现简单的分页效果
来源:互联网 发布:织梦云idc网站源码 编辑:程序博客网 时间:2024/05/21 07:55
基于jquery.page.js的一款简单的分页效果:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>简单的jQuery分页插件</title><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></head><body><br><br><br><div class="tcdPageCode"></div><center><pre><br></pre></center><script src="js/jquery-1.8.3.min.js"></script><script src="js/jquery.page.js"></script><script> $(".tcdPageCode").createPage({ pageCount:100, current:1, backFn:function(p){ console.log(p); } });</script></body></html>
调用方法如下:
$(".tcdPageCode").createPage({
pageCount:10,current:1,
backFn:function(p){
//单击回调方法,p是当前页码
}
});
pageCount:总页数
current:当前页
以下是jquery.page.js源代码:
(function($){var ms = {init:function(obj,args){return (function(){ms.fillHtml(obj,args);ms.bindEvent(obj,args);})();},//填充htmlfillHtml: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"){args.backFn(current+1);}});})();}}$.fn.createPage = function(options){var args = $.extend({pageCount : 10,current : 1,backFn : function(){}},options);ms.init(this,args);}})(jQuery);
阅读全文
0 0
- jquery.page.js实现简单的分页效果
- 使用jQuery实现简单的分页效果
- jquery page.js 实现ajax分页
- 38.jquery.page.js实现分页技巧
- jquery.page.js分页
- jquery.page.js实现ajax无刷新分页
- vue.js 组件实现简单分页效果
- 原生js简单实现jQuery的动画效果
- JS 实现简单的Table表格分页效果(假分页)
- 非常简单的JS分页效果
- jquery.page.js分页插件使用
- Js实现分页效果
- js框架jquery实现分页效果代码下载
- 简单的分页效果(servlet实现)
- jQuery实现“分页”的效果,控制div分页显示
- 采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
- 使用Jquery分页插件jquery.pagination.js 实现无刷新分页效果
- 采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
- SQL视图的概念和使用
- 第十三周java作业
- Visual Studio 2015 Cookbook, 2nd Edition.pdf 英文原版 免费下载
- java与JS的交互
- WebRtc学习资料整理
- jquery.page.js实现简单的分页效果
- Spring框架之依赖注(DI)和控制反转(IOC)的理解,写的太好了
- <如何做一名合格的研究生>讲座笔记
- 微软修复一个高危漏洞要多久?三个月之久
- 16. 集合类 (List的子类ArrayList、Vector、LinkedList与JDK 5新特性)
- 位运算
- 关于传递参数是出现id[]问题
- Qt/C++ 模仿 酷狗音乐播放器Qt/C++ 模仿 酷狗音乐播放器
- leetcode 482. License Key Formatting