码迷,mamicode.com
首页 > Web开发 > 详细

jquery分页

时间:2015-12-08 17:51:08      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

//分页插件
/**
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样式:

 

技术分享
<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;}
.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>
View Code

 

js代码:

技术分享
 调用方法:
    $(".tcdPageCode").createPage({
        pageCount:10,
        current:1,
        backFn:function(p){
            //单击回调方法,p是当前页码
        }
    });
    pageCount:总页数
    current:当前页
View Code

 

jquery分页

标签:

原文地址:http://www.cnblogs.com/ooip/p/5029591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!