如何实现数据水晶分页显示的功能？这就是要显示的结果首先要一个好看点的css样式?page.css文件的代码?BODY
如何实现数据水晶分页显示的功能？
这就是要显示的结果
首先要一个好看点的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()); ?} ? ?}; ?
?
