使用JQuery达到Ajax分页的效果

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

程序中需要用到的东西：jquery api包，大家可以到这里去下载：http://jquery.org.cn/

思路：一个静态页面，一个分页处理程序(showpage.asp)，通过在静态页面中编写程序将 showpage.asp 里的内容显示到静态页面中，并在showpage.asp里面调用javascript编写的分页函数，以实现静态页面无刷新分页。

现在开始：

首先，我们需要写一个传统的分页程序。

第一步，从数据库中读取数据

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

这些代码相信大家都已经很熟悉了，连接数据库并读取数据。

下面是分页的重要部分

<code>&lt;% rs.pagesize=5 curpage=Request.QueryString("curpage") if curpage="" then curpage=1 rs.absolutepage=curpage %&gt;</code>

接着开始循环显示数据

<code>&lt;% for i= 1 to rs.pagesize if rs.eof then exit for end if %&gt; &lt;%=rs("record_info")%&gt;&lt;br&gt; &lt;% rs.movenext next %&gt;</code>

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

<code>&lt;%if curpage=1 then%&gt; 首页 &lt;%else%&gt; &lt;a href="?curpage=1"&gt;首页&lt;/a&gt; &lt;%end if%&gt; &lt;%if curpage=1 then%&gt; 上一页 &lt;%else%&gt; &lt;a href="?curpage=&lt;%=curpage-1%&gt;"&gt;上一页&lt;/a&gt; &lt;%end if%&gt; &lt;%if rs.pagecount&lt;curpage+1 then%&gt; 下一页 &lt;%else%&gt; &lt;a href="?curpage=&lt;%=curpage+1%&gt;"&gt;下一页&lt;/a&gt; &lt;%end if%&gt; &lt;%if rs.pagecount&lt;curpage+1 then%&gt; 尾页 &lt;%else%&gt; &lt;a href="?curpage=&lt;%=rs.pagecount%&gt;"&gt;尾页&lt;/a&gt; &lt;%end if%&gt;</code>

将这个文件保存为showpage.asp

这时我们拥有了一个传统的简单asp分页显示数据的小程序，下面，我们开始利用jquery把这段程序更改为ajax分页。

首先建立一个空的html页面，并引入jquery支持，然后加入一个div,用以显示数据。

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;ASP+Ajax+Jquery分页程序&lt;/title&gt; &lt;link href="style/style.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="show_list"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code>

将这个文件保存为fenye.html

下面，在head区域写入以下函数：

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

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

修改前

修改后

<code>&lt;%if curpage=1 then%&gt; 首页 &lt;%else%&gt; //使用刚刚做好的get_page(url)函数来向html中载入制定的页面。 &lt;a href="#" onclick="get_page('showpage.asp?curpage=1');"&gt;首页&lt;/a&gt; &lt;%end if%&gt; &lt;%if curpage=1 then%&gt; 上一页 &lt;%else%&gt; &lt;a href="#" onclick="get_page('showpage.asp?curpage=&lt;%=curpage-1%&gt;');"&gt;上一页&lt;/a&gt; &lt;%end if%&gt; &lt;%if rs.pagecount&lt;curpage+1 then%&gt; 下一页 &lt;%else%&gt; &lt;a href="#" onclick="get_page('showpage.asp?curpage=&lt;%=curpage+1%&gt;');"&gt;下一页&lt;/a&gt; &lt;%end if%&gt; &lt;%if rs.pagecount&lt;curpage+1 then%&gt; 尾页 &lt;%else%&gt; &lt;a href="#" onclick="get_page('showpage.asp?curpage=&lt;%=rs.pagecount%&gt;');"&gt;尾页&lt;/a&gt; &lt;%end if%&gt;</code>

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

当然，jquery的强大功能完全不仅仅于此，这篇文章中的这个小程序只是应用了jquery众多函数中的一个——loadIfModified(),更强大的功能还需要我们自己去进一步学习了...