日期:2014-05-16  浏览次数:20330 次

javascript+ajax的分页处理

用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的值后,影响循环语句中的起始位置和最终位置,来改变页面显示的数据。

虽然语法有区别,但分页的思路同其他语言也是一样的。

?

?