如何实现数据水晶分页显示的功能？

这就是要显示的结果

首先要一个好看点的css样式

 

page.css文件的代码

 

BODY {

FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;WIDTH: 60%; PADDING-LEFT: 25px;

}

/*CSS green-black style pagination*/

DIV.green-black {

PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center

}

DIV.green-black A {

BORDER-RIGHT: #2c2c2c 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #2c2c2c 1px solid; PADDING-LEFT: 5px; BACKGROUND: url(images/pageimage1.gif) #2c2c2c; PADDING-BOTTOM: 2px; BORDER-LEFT: #2c2c2c 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #2c2c2c 1px solid; TEXT-DECORATION: none 

 

 

}

DIV.green-black A:hover {

BORDER-RIGHT: #aad83e 1px solid; BORDER-TOP: #aad83e 1px solid; BACKGROUND: url(images/pageimage2.gif) #aad83e; BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; BORDER-BOTTOM: #aad83e 1px solid

}

DIV.green-black A:active {

BORDER-RIGHT: #aad83e 1px solid; BORDER-TOP: #aad83e 1px solid; BACKGROUND: url(images/pageimage2.gif) #aad83e; BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; BORDER-BOTTOM: #aad83e 1px solid

}

DIV.green-black SPAN.current {

BORDER-RIGHT: #aad83e 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aad83e 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; BACKGROUND: url(images/pageimage2.gif) #aad83e; PADDING-BOTTOM: 2px; BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #aad83e 1px solid

}

DIV.green-black SPAN.disabled {

BORDER-RIGHT: #f3f3f3 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #f3f3f3 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #f3f3f3 1px solid; COLOR: #ccc; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #f3f3f3 1px solid copyright www.divcss5.com divcss5 

}

然后需要一个连接字符串的工具类

StringBuffer.js的代码

function StringBuffer(){

this._String = new Array();

};

StringBuffer.prototype.append = function(str){

this._String.push(str);

};

   StringBuffer.prototype.toString = function(){

return this._String.join('');

};

接着也是最关键的步骤了，把分页技术做成一个jquery的插件

page.js的代码

StringBuffer.prototype.toString = function(){

return this._String.join('');

};

jQuery.myPlugin={           

page: function(param) {                 

   var str=new StringBuffer();    

   var url =param.url; 

var pageNo = parseInt(param.pageNo);

var pageTotal = parseInt(param.pageTotal);

var dd=param.div;

str.append("<div class=\"green-black\">");  

if(pageTotal==1){   

   str.append("<span class='current'>1</span> ");   

}else{                       

   if (pageNo > 1) {     

       str.append("<a href='"+url+"&pageNo=1'>首页</a> ");   

       str.append("<a href='"+url+"&pageNo=" + (pageNo - 1));   

       str.append("'>上一页</a> " );   

   }else{                             

       str.append("首页  上一页 " );   

   }         

   var v=(pageNo-4)>0?(pageNo-4):1;   

   var v1=(pageNo+4)<pageTotal?(pageNo+4):pageTotal;     

   if(v1==pageTotal){

       v=pageTotal-10;  

       v= v<=0 ? 1: v; 

   }else if(v==1&&v1<pageTotal){ 

       v1=pageTotal>10?10:pageTotal;   

   } 

   for (var i = v; i <= v1; i++) {   

       if (pageNo == i) { 

      str.append("<span class=\"current\">");  

        str.append(i);  

        str.append("</span>");                                  

       }else{  

        str.append("<span>");  

           str.append("<a href='"+url+"&pageNo=" + i +"'>" + i + "</a> ");  

           str.append("</span>");                

       }                               

   }     

   if (pageNo<pageTotal) {        

       str.append("<a href='"+url+"&pageNo=" + (pageNo + 1));   

       str.append("'>下一页  </a> " );   

       str.append("<a href='"+url+"&pageNo=" + pageTotal);   

       str.append("'>尾页</a> " );   

   }else{   

       str.append("下一页  尾页" );   

   }   

}    

str.append("</div> ");

dd.html(str.toString());  

}    

};