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");//分页条的IDvar url = settings.url;//请求的服务器路径var size = settings.size;//每页显示的记录数var curPage = 1;//当前页数var maxPages = 0;var maxRows = 0;//分页条var pgBar = '<div />';pgBar += '<img src="css/page/images/first.gif" alt="JQUERY分页例证" />';pgBar += '<img src="css/page/images/separator.gif" />';pgBar += '<img src="css/page/images/prev.gif" alt="JQUERY分页例证" />';pgBar += '<span />';pgBar += '<img src="css/page/images/next.gif" alt="JQUERY分页例证" />';pgBar += '<img src="css/page/images/last.gif" alt="JQUERY分页例证" />';pgBar += '<span />';pgBar += '<div><input id="forwardPage"/><input 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");}?