使用JQuery达到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%>
这时我们拥有了一个传统的简单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>
下面,在head区域写入以下函数:
function ()
{
//这里是在页面载入时通过Jquery的loadIfModified函数将showpage.asp载入到当前的html文件中。
$("#show_list").loadIfModified("showpage.asp");
}
function get_page(url)
{
//这里的意思就是使用jquery载入指定页面的地址。
$("#show_list").loadIfModified(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(),更强大的功能还需要我们自己去进一步学习了...