日期:2014-05-16 浏览次数:20363 次
用javascript写分页代码的时候,由于无法像php一样使用$_GET[]函数获取连接中附带的值(例如:<a href='a.php?name='.$name.'>')而又要实现不同页面参数的传递,所以,需要利用javascript中的window.location.toString()函数,它的作用是获取当前浏览器中地址栏中的地址,然后利用split("?")函数将地址按?截断为两部分,并将结果保存在一个数组中,接着利用parseInt(ob,int)将ob转换为数字,这时要注意,链接中传递的参数应该只能是数字,这样利用parseInt函数转换的时候才有意义。像<a href='a.php?page=1'>
?
实现分页功能的基本思路:
1.连接到数据库, 并且依据sql语句取得了查询结果
2.需要设定几个值:
?
var amount=yan.length; //总记录数 var page_size=16; //每页记录数 var pages; //总页数 var page=1; //当前页码 var inta=0; //每一次查询的起始位置
var b; //设定查询的终止位置
?
3.每一次加载页面的时候都要获取page的值,依据page的值来改变页面的显示结果
?
var str=window.location.toString(); if (str.indexOf("?")==-1) { str=str+"?1" } r=str.split("?") page=parseInt(r[1],10);
?
4.进行逻辑判断
?
if(amount==0){ document.getElementById("res").innerHTML="要查询的信息不存在"; }? else{
?
if (amount<page_size) { pages=1; } else{ if (amount%page_size==0) { pages=(amount/page_size); } else { pages=(parseInt)(amount/page_size)+1; } } if (page>=pages) { inta=(pages-1)*page_size; //到了尾页不应该继续往下翻,显示的始终是最后一页的页面 b=amount
} else { inta=(page-1)*page_size; b=page*page_size; }
?
?4.设定好了这些逻辑参数以后就可以进行输出显示了
for(var i=inta;i<b;i++) { var y=yan[i]; ta+="<tr bgcolor='#e5e5e5'><td><span style='font-size:15;color:blue'>"+y.childNodes[0].firstChild.data+"</span></td>"; ta+="<td><span style='font-size:14'>"+y.childNodes[1].firstChild.data+"</span></td>"; ta+="<td><span style='font-size:14'>"+y.childNodes[2].firstChild.data+"</span></td>"; ta+="<td><span style='font-size:14'>"+y.childNodes[3].firstChild.data+"</span></td>"; ta+="<td><span style='font-size:14'>"+y.childNodes[4].firstChild.data+"</span></td>"; ta+="<td><span style='font-size:14'>"+y.childNodes[5].firstChild.data+"</span></td>"; ta+="<td><span style='font-size:14'>"+y.childNodes[6].firstChild.data+"</span></td>"; ta+="<td><span style='font-size:14'>"+y.childNodes[7].firstChild.data+"</span></td>"; ta+="<td><span style='font-size:14'>"+y.childNodes[8].firstChild.data+"</span></td>"; ta+="<td><span style='font-size:14'>"+y.childNodes[9].firstChild.data+"</span></td></tr>"; }?
5.下面的就是分页连接了
if (page==1) { page_string+='第一页|上一页'; } else { page_string+='<a href=?1>第一页</a>|<a href=?'+(parseInt)(page-1)+'>上一页</a>|'; } if (page==pages) { page_string+='下一页|尾页'; } else { page_string+='<a href=?'+(page+1)+'>下一页</a>|<a href=?'+pages+'>尾页</a>'; }?
ta+=page_string;
document.getElementById("res").innerHTML=ta;
分页链接通过改变并提交page的值后,影响循环语句中的起始位置和最终位置,来改变页面显示的数据。
虽然语法有区别,但分页的思路同其他语言也是一样的。
?
?