jquery分页
2015-12-08 16:48
676 查看
//分页插件 /** 2015-12-7 **/ (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"){ args.backFn(current+1); } }); })(); } } $.fn.createPage = function(options){ var args = $.extend({ pageCount : 10, current : 1, backFn : function(){} },options); ms.init(this,args); } })(jQuery);
js源码----jquery.page.js
此js文件来自网络
前台引用:
<script src="jquery.min.js"></script>
<script src="jquery.page.js"></script>
CSS样式:
调用方法: $(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法,p是当前页码 } }); pageCount:总页数 current:当前页
View Code
相关文章推荐
- js/jquery(2)
- Jquery easyui从零单排之datagrid数据绑定
- JQuery--CSS操作
- jQuery基于ajax()使用serialize()提交form数据的方法
- jQuery全屏滚动插件fullPage.js
- JS & JQuery 动态添加 select option
- jquery操作select(取值,设置选中)
- 基于jQuery slide插件的轮播大图,带标题及简介,附源码
- jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
- 自定义jQuery的animate动画
- 10个 jQuery 小技巧
- jQuery滑过头像图片展示个人信息效果
- jquery插件编写
- jquery 选择器和Jquery中选择器的基本介绍
- jquery+ajax实现注册实时验证实例详解
- jquery validate的验证规则和验证提示
- jquery ajax异步 获得返回值
- jQuery使用$.ajax进行即时验证的方法
- FlexSlider插件的详细参数设置 附下载地址
- 【javascript类库】zepto和jquery的md5加密插件