JQUERY分页例子

// SSH+jquery实现分页核心类
$.fn.page = function(options){
	//设置默认参数值
	var settings = {
		size: 10,
		url: "shop.do?ptype=findPager"
	};
	//获取传入参数值
	if(options){
		$.extend(settings, options);
	}
	
	//为分页条添加样式
	this.addClass("page");
	
	
	var p = '#'+this.attr("id");		//分页条的ID
	var url = settings.url;				//请求的服务器路径
	var size = settings.size;			//每页显示的记录数
	var curPage = 1;					//当前页数
	var maxPages = 0;
	var maxRows = 0;
	
	//分页条
	var pgBar = '<div class="pgBar">';
	pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
	pgBar += '<img src="css/page/images/first.gif" alt="首页" class="firstBtn" />';
	pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
	pgBar += '<img src="css/page/images/prev.gif" alt="前页"  class="preBtn"/>';
	pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
	pgBar += '<span class="pageInfo">第&nbsp;&nbsp;<label id="pageNo">1</label>&nbsp;&nbsp;页&nbsp;/';
	pgBar += '共&nbsp;&nbsp;<label id="pageAll">12</label>&nbsp;&nbsp;页</span>';
	pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
	pgBar += '<img src="css/page/images/next.gif" alt="后页"  class="nextBtn"/>';
	pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
	pgBar += '<img src="css/page/images/last.gif" alt="尾页"  class="endBtn"/>';
	pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
	pgBar += '<span class="pageInfo">检索到&nbsp;&nbsp;<label id="rowAll">80</label>&nbsp;&nbsp;条记录</span>';
	pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
	pgBar += '<div><input class="text" id="forwardPage"/><input class="button" id="forward" type="button" value="转到" /></div>';
	pgBar += '<div>';
	//加载到当前页面
	this.html(pgBar);	
	
	//第一次加载数据
	loadData(url, size, curPage);	
		
	//第一次加载，显示第一页，第一页按钮停用
	disablePrev(p);
	
	//点击首页
	$(p+" .firstBtn").click(function(){
		disablePrev(p);
		enableNext(p);
		//第一页，不执行
		if(curPage == 1) return;
		curPage=1;	
		//Ajax提交	
		loadData(url, size, curPage);
	});

	//点击前页
	$(p+" .preBtn").click(function(){
		enableNext(p);
		if(curPage == 1) return;
		curPage--;
		if(curPage == 1) {
			disablePrev(p);
		}		
		//Ajax提交
		 loadData(url, size, curPage);	
	});

	//点击后页
	$(p+" .nextBtn").click(function(){
		maxPages = $("#pageAll").text();
		if(curPage == maxPages) return;
		enablePrev(p);
		curPage++;
		if(curPage == maxPages)
			disableNext(p);
		//alert(curPage);
		//Ajax提交	
		//alert(curPage);
		loadData(url, size, curPage);
	});

	//点击尾页
	$(p+" .endBtn").click(function(){
		enablePrev(p);
		disableNext(p);
		maxPages = $("#pageAll").text();
		if(curPage == maxPages) return;
		curPage = maxPages;
		//alert(maxPages);
		
		//Ajax提交	
		//alert(curPage);
		loadData(url, size, curPage);
	});
	
	//点击跳转
	$(p+" #forward").click(function(){
		curPage = $("#forwardPage").val();
		maxPages = $("#pageAll").text();
		//alert(curPage.length);
		if(curPage.length == 0){
			alert("请输入要跳转的页数");
			return;
		}
			
		if(curPage == 1){
			disablePrev(p);
			enableNext(p);
		}
		if(curPage == maxPages){
			enablePrev(p);
			disableNext(p);
		}
		//ajax提交
		//alert(curPage);
		loadData(url, size, curPage);
		
	});
	
}
	//ajax方法
	function loadData(url, size, curPage){
		$.ajax({
			type:"POST",
			url:url,
			data:"curPage="+curPage+"&pageSize="+size,
			dataType:"json",
			beforeSend:function(){
				$(".ui-widget-overlay").show();
			},
			success:function(data){				
				$("#pageNo").text(data.curPage);
				$("#pageAll").text(data.maxPageCount);
				$("#rowAll").text(data.maxRowsCount);
				$(".ui-widget-overlay").hide();
				var s= '';
				for(var i=0;i<data.list.length;i++){
                    s += "<tr><td>" + data.list[i].ShopUid + "</td><td>" + data.list[i].ShopUname + "</td>";
					s+="<td>"+data.list[i].ShopUflag+"</td><td>"+data.list[i].ShopUpcode+"</td></tr>"
				}
				$("table tr").not($(".title")).each(function(){$(this).remove();});
				$("table tr").eq(0).after(s);
				
			}
		});
	}

	//停用首页前页
	function disablePrev(p){
		$(p+" .firstBtn").attr("src","css/page/images/first_disabled.gif");
		$(p+" .preBtn").attr("src","css/page/images/prev_disabled.gif");
	}
	//
	function enablePrev(p){
		$(p+" .firstBtn").attr("src","css/page/images/first.gif");
		$(p+" .preBtn").attr("src","css/page/images/prev.gif");
	}
	
	function disableNext(p){
		$(p+" .nextBtn").attr("src","css/page/images/next_disabled.gif");
		$(p+" .endBtn").attr("src","css/page/images/last_disabled.gif");
	}

	function enableNext(p){
		$(p+" .nextBtn").attr("src","css/page/images/next.gif");
		$(p+" .endBtn").attr("src","css/page/images/last.gif");
	}