使用JQuery达到Ajax分页的效果

一直以来都很眼红别人用ajax做的分页,想自己也写一个,但是苦于对xml不是很懂,因为我也只是个javascript的初学者,面对复杂的那些 javascript语句的确有点头疼,终于,在自己的努力下实现了用jquery做ajax分页程序,现在把程序贴出来,希望能给和我一样刚刚开始学习 javascript和ajax的弟兄们一点思路,大家一起研究。

程序中需要用到的东西:jquery api包,大家可以到这里去下载:http://jquery.org.cn/
思路:一个静态页面,一个分页处理程序(showpage.asp),通过在静态页面中编写程序将 showpage.asp 里的内容显示到静态页面中,并在showpage.asp里面调用javascript编写的分页函数,以实现静态页面无刷新分页。

现在开始:
首先,我们需要写一个传统的分页程序。
第一步,从数据库中读取数据

<%
Set conn=Server.CreateObject("Adodb.Connection")
connstr="provider=Microsoft.JET.OLEDB.4.0;Data Source="&Server.MapPath("data.mdb")
conn.open connstr
Set rs=Server.CreateObject("Adodb.Recordset")
sql="Select * from info"
rs.open sql,conn,1,1
%>

这些代码相信大家都已经很熟悉了,连接数据库并读取数据。
下面是分页的重要部分

<%
rs.pagesize=5
curpage=Request.QueryString("curpage")
if curpage="" then curpage=1
rs.absolutepage=curpage
%>

接着开始循环显示数据

<%
for i= 1 to rs.pagesize
if rs.eof then
exit for
end if
%>
<%=rs("record_info")%><br>
<%
rs.movenext
next
%>

下面,是做好翻页的功能链接

<%if curpage=1 then%>
首页
<%else%>
<a href="?curpage=1">首页</a>
<%end if%>

<%if curpage=1 then%>
上一页
<%else%>
<a href="?curpage=<%=curpage-1%>">上一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
下一页
<%else%>
<a href="?curpage=<%=curpage+1%>">下一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
尾页
<%else%>
<a href="?curpage=<%=rs.pagecount%>">尾页</a>
<%end if%>

将这个文件保存为showpage.asp
这时我们拥有了一个传统的简单asp分页显示数据的小程序,下面,我们开始利用jquery把这段程序更改为ajax分页。
首先建立一个空的html页面,并引入jquery支持,然后加入一个div,用以显示数据。

<!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>
<script type="text/javascript" src="js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ASP+Ajax+Jquery分页程序</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="show_list"></div>

</body>
</html>

将这个文件保存为fenye.html
下面,在head区域写入以下函数:

function ()
{
//这里是在页面载入时通过Jquery的loadIfModified函数将showpage.asp载入到当前的html文件中。
$("#show_list").loadIfModified("showpage.asp");
}
function get_page(url)
{
//这里的意思就是使用jquery载入指定页面的地址。
$("#show_list").loadIfModified(url);
}

接着,我们需要对我们刚刚写好的那个asp传统的分页程序做一点点改动。就是把分页的功能链接变为调用javascript函数,以调用我们刚刚写好的函数get_page(url),将首页、上一页、下一页、尾页四个链接做这样的修改。
修改前

<%if curpage=1 then%>
首页
<%else%>
<a href="?curpage=1">首页</a>
<%end if%>

<%if curpage=1 then%>
上一页
<%else%>
<a href="?curpage=<%=curpage-1%>">上一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
下一页
<%else%>
<a href="?curpage=<%=curpage+1%>">下一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
尾页
<%else%>
<a href="?curpage=<%=rs.pagecount%>">尾页</a>
<%end if%>

修改后

<%if curpage=1 then%>
首页
<%else%>
//使用刚刚做好的get_page(url)函数来向html中载入制定的页面。
<a href="#" onclick="get_page('showpage.asp?curpage=1');">首页</a>
<%end if%>

<%if curpage=1 then%>
上一页
<%else%>
<a href="#" onclick="get_page('showpage.asp?curpage=<%=curpage-1%>');">上一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
下一页
<%else%>
<a href="#" onclick="get_page('showpage.asp?curpage=<%=curpage+1%>');">下一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
尾页
<%else%>
<a href="#" onclick="get_page('showpage.asp?curpage=<%=rs.pagecount%>');">尾页</a>
<%end if%>


好,现在刷新你的html页面(注意,这里已经是html文件,已经不是传统分页所必须的asp文件了),你就很容易的得到了一个基于ajax的asp无刷新分页程序了。

当然,jquery的强大功能完全不仅仅于此,这篇文章中的这个小程序只是应用了jquery众多函数中的一个——loadIfModified(),更强大的功能还需要我们自己去进一步学习了...
posted @ 2009-07-31 08:51  与时俱进  阅读(4294)  评论(0编辑  收藏  举报
友情链接:同里老宅院民居客栈