zoukankan      html  css  js  c++  java
  • 使用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(),更强大的功能还需要我们自己去进一步学习了...
  • 相关阅读:
    ps -aux --sort -rss |head 列出进程拿物理内存占用排序 使用ps aux 查看系统进程时,第六列即 RSS列显示的就是进程使用的物理内存。
    13 memcache服务检查
    shell 颜色
    expr判断整数是相加的值,返回命令的返回值$? 是0,但是少数情况是1,例如1 + -1 ,$? 的结果是1 ,判断要大于1最准确
    ZABBIX监控原理
    ansible分发密钥
    再来一个expect脚本
    11:菜单自动化软件部署经典案例
    19:批量检查多个网站地址是否正常
    数组迭代
  • 原文地址:https://www.cnblogs.com/top5/p/1535604.html
Copyright © 2011-2022 走看看