sxpo
中级会员
 
UID 93812
精华
0
积分 205
帖子 308
金钱 205 喜悦币
威望 0
人脉 0
阅读权限 30
注册 2007-6-11
状态 离线
|
发一个分页类(ajax+json)
马上就要去新的单位上班了，今天整理了一下自己的类库，发一个原创的分页类，相信肯定有朋友能用到吧!
设计的思路很简单,结构,样式,行为分开,服务器仅仅提供基本的数据(我用的JSON包和隐藏的INPUT),由javascript来改变结构和样式,也就是客户端去处理分页,代码里面有详细的注释,欢迎批评指点!
ajax部分大家都差不多,我就不贴出来了
哦，忘记发演示地址了: 演示地址
<?php
HTML文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>搜索页面</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link href="css.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY>
<input type = "hidden" value = '20001' id = "num" name = "num" /><!--服务器给的总数-->
<input type = "hidden" value = '5' id = "perPage" name = "perPage" /><!---服务器从cookie中读，没有就默认为5-->
<input type="hidden" value = "11" id = "keyword" /><!--关键字，客户端请求时就发过去了 再返回来-->
<input type="hidden" value = "1" id = "curPV" /><!--当前是第几页-->
<div id = "div_list">
<ul>
<li class = "base" id = "previous"><a href = "javascript:;">向上</a></li>
<li class = "line"></li>
<li id = "li1" class = "base cur"><a href = "javascript:;">1</a></li>
<li class = "line" id = "line1"></li><li id = "li2" class = "base"><a href = "javascript:;">2</a></li>
<li class = "line" id = "line2"></li><li id = "li3" class = "base"><a href = "javascript:;">3</a></li>
<li class = "line" id = "line3"></li><li id = "li4" class = "base"><a href = "javascript:;">4</a></li>
<li class = "line" id = "line4"></li><li id = "li5" class = "base"><a href = "javascript:;">5</a></li>
<li class = "line" id = "line5"></li><li id = "li6" class = "base"><a href = "javascript:;">6</a></li>
<li class = "line" id = "line6"></li><li id = "li7" class = "base"><a href = "javascript:;">7</a></li>
<li class = "line" id = "line7"></li><li id = "li8" class = "base"><a href = "javascript:;">8</a></li>
<li class = "line" id = "line8"></li><li id = "li9" class = "base"><a href = "javascript:;">9</a></li>
<li class = "line" id = "line9"></li><li id = "li10" class = "base"><a href = "javascript:;">24</a></li>
<li class = "line" id = "line10"></li><li id = "next" class = "base"><a href = "javascript:;">向下</a></li>
</ul>
</div>每页显示 <a href = "javascript:;" onclick = "list.reList(5)">五条</a> <a href = "javascript:;" onclick = "list.reList(10)">十条</a> <a href = "javascript:;" onclick = "list.reList(20)">二十条</a>
<script language="JavaScript" type="text/javascript" src="script.js"></script>
</BODY>
</HTML>
css.css文件:
html,div{
font-family: "宋体";
font-size:12px;
line-height:150%;
}
#div_list {
float:right;
}
.base{
padding:0.25em;
text-align:center;
display:block;
LIST-STYLE-TYPE: none;
background-color:#f2f6fe;
border:1px solid #99bcfc;
border-right:none;
width:2.5em;
}
.cur{
background-color:#FF7F50;
}
.line{
LIST-STYLE-TYPE: none;
height:20px;
width:2.5em;
border-right:1px solid #99bcfc;
}
#div_list li a {
display:block;
}
js文件:
//此函数 不用解释了吧
function $(elementId) {
return document.getElementById(elementId);
}
/**
* 分页列表类
*
* 设计思路为：
* 1.当服务器端接收到用户请求之后，通过服务器端程序取得记录数
* 2.服务器端程序负责显示的部分辅助建立HTML结构
* 3.服务器端程序向javascript的分页列表类提供:得到的记录总数(num) (记录的显示就和这个分页列表类无关了)
* 4.分页列表类根据num和用户设置的每页显示记录数(默认为5 perPage)来操作DOM来响应用户的请求
*
* 具体实现:
* 1.当用户希望向服务器端请求下一批记录，也就是下一页的时候，分页列表类负责收集服务器端需要的信息，通过ajax方式传送到服务器端( 当然，传送的同时和接受也需* 要javascript去处理，典型的包接包送 )
* 2.当用户希望向改变每页显示记录数的时候，分页列表类负责收集服务器端需要的信息，后同上。
*
* 列表我设置了10个列表项，外加一个上一页，一个下一页，我觉得应该是够了，第一个列表项始终是第一页，最后一个列表项始终是最后一页。
**/
var list = {
num:parseInt($('num').value),//定义纪录总数
/**
* 初始化列表，当页面初次载入，改变每页显示记录数的时候，都需要初始化列表
*
* 初始化时，检查每页记录数是否变化，重新计算出最大页数。
* 然后根据最大页数来判断是否将第10个列表项置为最大页数
* 最后初始化列表项的个数，也就是将最大页数传给change函数，详细情况见change函数说明.
*
* @return void
**/
initList:function(){
this.perPage= parseInt($('perPage').value);//感觉将每页显示记录数perPage 存在Cookie中更好
this.maxPage=Math.ceil($('num').value/$('perPage').value);//计算出最大页数，每次初始化都要重新计算
if (this.maxPage>10) $('li10').firstChild.firstChild.nodeValue = this.maxPage;
this.change(this.maxPage);
},
/**
* 响应用户选择新的页数的点击，并重新排列列表的内容，颜色
*
* 首先如果最大页数小于10的话，那就得去掉几个了框框了，然后点几就是几了
* 接下来就都是最大页数大于或等于10的情况，用户点击的页数一般情况下是前3后4
* 如果页数减3小于2了 那就从2开始排列往上8个，如果页数加4大于或等于最大数了 那就从最大开始往下排列8个
*
* @param int page 用户想看第几页 因此，也可以做个输入框，让用户选择第几页的。
* @param boolean 是否对点击当前页做出反应 之所以会有这个选项，是因为用户如果更换每页显示记录数的时候，有重新请求当前页数的可能
* @return void
**/
jump:function(page,force){
if (this.num<1) return;//当总记录为0的时候，不许跳
var page = page?parseInt(page):1;//设置默认数1
if (!force&&(page == $('curPV').value||page<1||page>this.maxPage)) return;//点击当前页 页数太小太大为不反应（其实可以设置个变量，点当前页到99次 骂他神经病 grin）
$('curPV').value = page;//设置hidden input 记录当前页数
for (i = 1;i<=Math.min(this.maxPage,10);i++) //初始化所有列表为基础样式
{
$('li'+i).className = 'base';
}
if (this.maxPage<10|| page<5)//最大页数小于10和点最开始几页比较像 合在一起了
{
for (i=1;i<=(this.maxPage<10?this.maxPage:9);i++)//也可以用 <Math.min(this.maxpage+1,10) 第十页始终显示最大页数
{
$('li'+i).firstChild.firstChild.nodeValue = i; //这是页数都比较小的情况下
}
$('li'+page).className = 'base cur';//设置当前页数的颜色
}else if (page + 4>=this.maxPage) //这里就是最后几页了 到了这里之后也就确定最后几页不是前面几页了
{
for (i=this.maxPage,j=10;i>=(this.maxPage-8);i--,j--)//li1 始终显示 第一页
{
$('li'+j).firstChild.firstChild.nodeValue = this.maxPage-10+j;
}
$('li'+(10+page-this.maxPage)).className = 'base cur';
}else{//到这里的时候就说明应该是中心地带了，采取前3后4
for (i=page-3,j=2;i<=(page+4);i++,j++) //中心地带li1 显示第一页，li10显示最后一页
{
$('li'+j).firstChild.firstChild.nodeValue = i;
}
$('li5').className = 'base cur';
}
//向服务器传递参数 ajax的代码大家都有吧，我就不贴出来了
},
/**
* 响应用户选择新的每页显示记录数的点击，并重排列表
*
* 当每页显示记录数发生变化的时候，记录当前显示记录的第一条，来计算出新的当前页数gPage
*
* @param int perPage 用户每页显示几条记录数 因此，也可以做个输入框，让用户自己去输入多少记录，我选取了5，10，20 出来。
* @return void
**/
reList:function(perPage){
if (perPage == $('perPage').value) return; //点击当前每页显示记录数无效
var gPage = Math.ceil((parseInt($('perPage').value)*(parseInt($('curPV').value)-1)+1)/perPage);//得到新的当前页数
$('perPage').value = perPage;//记录新的每页显示记录数，在我自己的项目里面，我是写到cookie中的
this.initList();//初始化列表
this.jump(gPage,1);//初始化之后进入新的当前页数
},
/**
* 根据传入的新列表个数，来显示或者隐藏列表项
*
* 根据记录总数的不同，显示的最大页数可能小于10，那默认的10个列表就多了，需要隐藏，在上面relist的过程中，也可能会产生将隐藏列表显示出来的需求
*
* @param int newLen 新的列表长度，我设置最大长度是10
* @return void
**/
change:function(newLen){
newLen = Math.min(parseInt(newLen),10);//最大为10
for (i = 1;i<11;i++){
if (i>newLen) {//大于新长度就隐藏 小于就显示
$('li'+i).style.display = 'none';
$('line'+i).style.display = 'none';
}else{
$('li'+i).style.display = 'block';
$('line'+i).style.display = 'block';
}
}
}
};
//以下几个函数为增加列表项节点的事件 也可增加onmouserover 和onmouseout 等事件
for (i = 1;i<=10;i++)
{
$('li'+i).onclick = function(){
list.jump(this.firstChild.firstChild.nodeValue);
}
}
$('previous').onclick = function(){
list.jump(parseInt($('curPV').value)-1);
}
$('next').onclick = function(){
list.jump(parseInt($('curPV').value)+1);
}
list.initList();//初始化项目
?> [ 本帖最后由 sxpo 于 2007-10-24 11:24 AM 编辑 ]
| 
拥抱真是个奇怪的东西，明明靠的那么近，却...... |
|
