怎么实现数据水晶分页显示的功能

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

这就是要显示的结果
怎么实现数据水晶分页显示的功能

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

}

};

怎么实现数据水晶分页显示的功能

相关推荐