日期:2014-05-16 浏览次数:20445 次
用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的值后,影响循环语句中的起始位置和最终位置,来改变页面显示的数据。
虽然语法有区别,但分页的思路同其他语言也是一样的。
?
?