仿淘宝ajax分页控件带例子 编辑

默认生成的样式.自己可以调整.:

 

?

1 2 3

< table  id = "commentTab"  width = "100%;" > </ table >   < div  id = "meneameFy" ></ div >

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

//分页控件输出以及判断的主要方法 function pageInit(s){      currsPage=s;//当前页码 (注意是传过来的)      var totalPage =  "${totalPage}" ;        //最大页码(从后台传递过来的)      var grountCount =  9 ;    //每组显示的个数 (可以自定义)      var currsPageYM = currsPage+ 4 ;    //页面显示的页码最大值      var strSpan =  "" ;            //向页面输出值      if(totalPage < grountCount){    //最大页码小于每组的显示个数,直接输出所有页码          if(currsPage ==  1 ){              strSpan =  "<span class='disabled'> < </span>" ;          }else{              strSpan =  "<a href='javascript:Page(1);'> < </a>" ;          }          for(var j = totalPage;j> 0 ;j--){              var bb = totalPage - j+ 1 ;              if(bb == currsPage){                  strSpan = strSpan+ "<span class='current'>" +bb+ "</span>" ;              }else{                  strSpan = strSpan+ "<a href='javascript:Page(" +bb+ ");'>" +bb+ "</a>" ;              }              if(bb == totalPage){                  break;              }          }          if(currsPage == totalPage){              strSpan = strSpan+ "<span class='disabled'> > </span>" ;          }else{              strSpan = strSpan+ "<a href='javascript:Page(" +totalPage+ ");'> > </a>" ;          }      }else if(currsPageYM >= totalPage){        //页面显示的页码最大值大于或等于最大页码,及最后一组页码显示,做特殊处理          if(currsPage ==  1 ){              strSpan =  "<span class='disabled'> < </span>" ;              currsPageYM = grountCount;          }else{              strSpan =  "<a href='javascript:Page(1);'> < </a>" ;          }          for(var k = grountCount;k> 0 ;k--){              var bb = totalPage - k+ 1 ;              if(bb == currsPage){                  strSpan = strSpan+ "<span class='current'>" +bb+ "</span>" ;              }else{                  strSpan = strSpan+ "<a href='javascript:Page(" +bb+ ");'>" +bb+ "</a>" ;              }              if(bb == totalPage){                  break;              }          }          if(currsPage == totalPage){              strSpan = strSpan+ "<span class='disabled'> > </span>" ;          }else{              strSpan = strSpan+ "<a href='javascript:Page(" +totalPage+ ");'> > </a>" ;          }      }else{        //页码逻辑正常显示处理          if(currsPage ==  1 ){              strSpan =  "<span class='disabled'> < </span>" ;              currsPageYM = grountCount;          }else{              strSpan =  "<a href='javascript:Page(1);'> < </a>" ;          }          for(var i = grountCount;i> 0 ;i--){              var bb = currsPageYM - i+ 1 ;              if(bb == currsPage){                  strSpan = strSpan+ "<span class='current'>" +bb+ "</span>" ;              }else{                  strSpan = strSpan+ "<a href='javascript:Page(" +bb+ ");'>" +bb+ "</a>" ;              }              if(bb == totalPage){                  break;              }          }          if(currsPage == totalPage){              strSpan = strSpan+ "<span class='disabled'> > </span>" ;          }else{              strSpan = strSpan+ "<a href='javascript:Page(" +totalPage+ ");'> > </a>" ;          }      }      document.getElementById( "meneameFy" ).innerHTML=strSpan; }     //ajax分页获取数据方法 function Page(s){      jQuery( "#commentTab tr" ).remove();      jQuery.post( "getAllCommentProduct.action" ,{prodId: "${id}" ,pageNo:s},function(data){          pageInit(s);           for(var i= 0 ;i<data.rows.length;i++){                          var ss=                           "<tr><th style='width:100px;'>评论昵称:</th><td>" +data.rows[i].nicheng+ "</td></tr>"                           + "<tr class='capti'>"                      + "<th>评论内容:</th><td><div style='height:100px;width:800px;border:1px solid pink;'>" +data.rows[i].content+ "</div><div style='float:right;'>" +data.rows[i].createTime+ "</div></td>"                               + "</tr>" ;                               jQuery(ss).appendTo(commentTab);           }                  }, "json" ); }     //页面初始化加载 jQuery(function(){      <%      String id=request.getParameter( "id" );      request.setAttribute( "id" , id);      String totalPage=request.getParameter( "totalPage" );      request.setAttribute( "totalPage" , totalPage);      String resultSize=request.getParameter( "resultSize" );      request.setAttribute( "resultSize" ,resultSize);      String pageNo = request.getParameter( "pageNo" );      request.setAttribute( "pageNo" , pageNo);      %>      pageInit( 1 );//页面加载初始化传入当前页码为 1      Page( 1 );//获取第一页面的数据 });

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//默认样式，不喜欢可以修改 <style> div#meneameFy{ margin : 10px  150px ;} div#meneameFy A {      BORDER-RIGHT:  #ff9600  1px  solid ; PADDING-RIGHT:  7px ; BACKGROUND-POSITION:  50%  bottom ; BORDER-TOP:  #ff9600  1px  solid ; PADDING-LEFT:  7px ; BACKGROUND-IMAGE:  url (meneame.jpg); PADDING-BOTTOM:  5px ; BORDER-LEFT:  #ff9600  1px  solid ; COLOR:  #ff6500 ; MARGIN-RIGHT:  3px ; PADDING-TOP:  5px ; BORDER-BOTTOM:  #ff9600  1px  solid ; TEXT-DECORATION:  none } div#meneameFy A:hover {      BORDER-RIGHT:  #ff9600  1px  solid ; BORDER-TOP:  #ff9600  1px  solid ; BACKGROUND-IMAGE:  none ; BORDER-LEFT:  #ff9600  1px  solid ; COLOR:  #ff6500 ; BORDER-BOTTOM:  #ff9600  1px  solid ; BACKGROUND-COLOR:  #ffc794 } div#meneameFy A:active {      BORDER-RIGHT:  #ff9600  1px  solid ; BORDER-TOP:  #ff9600  1px  solid ; BACKGROUND-IMAGE:  none ; BORDER-LEFT:  #ff9600  1px  solid ; COLOR:  #ff6500 ; BORDER-BOTTOM:  #ff9600  1px  solid ; BACKGROUND-COLOR:  #ffc794 } div#meneameFy SPAN.current {      BORDER-RIGHT:  #ff6500  1px  solid ; PADDING-RIGHT:  7px ; BORDER-TOP:  #ff6500  1px  solid ; PADDING-LEFT:  7px ; FONT-WEIGHT:  bold ; PADDING-BOTTOM:  5px ; BORDER-LEFT:  #ff6500  1px  solid ; COLOR:  #ff6500 ; MARGIN-RIGHT:  3px ; PADDING-TOP:  5px ; BORDER-BOTTOM:  #ff6500  1px  solid ; BACKGROUND-COLOR:  #ffbe94 } div#meneameFy SPAN.disabled {      BORDER-RIGHT:  #ffe3c6  1px  solid ; PADDING-RIGHT:  7px ; BORDER-TOP:  #ffe3c6  1px  solid ; PADDING-LEFT:  7px ; PADDING-BOTTOM:  5px ; BORDER-LEFT:  #ffe3c6  1px  solid ; COLOR:  #ffe3c6 ; MARGIN-RIGHT:  3px ; PADDING-TOP:  5px ; BORDER-BOTTOM:  #ffe3c6  1px  solid } </style>