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

这就是要显示的结果

首先要一个好看点的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());   }     };  


4000

 

阅读更多