利用jQuery中的ajax分页实现代码_H5之家 - 中国HTML5教程资源分享第一站

一直以来都很眼红别人用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%> //使用刚刚做好的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(),更强大的功能还需要我们自己去进一步学习了...