• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax读取数据之分页显示篇实现代码
    我觉得还是有必要把我的ajax分页呈现给大家.我先讲一下这个ajax分页的实现核心,然后我们再看实例效果.所谓的ajax分页与传统的数据分页,在服务端的代码基本上是一样的.我们主要做的是使用ajax在不刷新的情况下,将请求的页码,和每页要显示的条数发送给服务端的处理网页.大家点击这个网址就可以看到要请求的数据:"ajax_page.asp?action=readpagecount=3 current_page=1"
    在这段URL里,pagecount代表每页要显示几条数据,current_page代表要请求的页码.服务端就是根据这两个参数来传回你想要请求的数据.下面我们看下实例效果:
    这是前端的ajax代码:
    复制代码 代码如下:

    html>
    head>
    title>ajax数据分页/title>
    style>
    body{
    font-size:12px;
    }
    table{
    border-collapse:collapse;
    }
    li{
    list-style:none;
    border:1px solid;
    width:20px;
    height:20px;
    text-align:center;
    margin:5px;
    padding:2px;
    float:left;
    cursor:pointer;
    }
    /style>
    /head>
    body>
    默认显示每页为5条数据,你可以在下面文本框设置每页的显示条数hr/>
    输入每页要显示的条数:input id="edit_count" type="text" /> input type="button" type="button" value="确定" onclick="Read()"/>
    table border="1">!--该表格用来显示数据内容-->
    thead>tr>td>编号/td>td>内容/td>/tr>/thead>
    tbody id="a">/tbody>
    /table>
    span id="msg" style="color:red">/span>
    br/>
    ul id="page">!--页导航-->
    /ul>
    script type="text/javascript">
    var All_page;//总页数
    var All_record;//总条数
    var Current_page;//当前页
    var PageCount;//每页显示的条数
    function ajax_xmlhttp(){
    //在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本
    var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
    for(var i=0; imsXmlhttp.length; i++){
    try
    {
    _xmlhttp=new ActiveXObject(msXmlhttp[i]);
    }
    catch(e)
    {
    _xmlhttp=null;
    }
    } //循环创建基于IE浏览器的xmlhttp.结束
    //如果非IE浏览器,则创建基于FireFox等浏览器的xmlhttpRequest
    if(!_xmlhttp typeof XMLHttpRequest != "undefined")
    {
    _xmlhttp=new XMLHttpRequest();
    }
    return _xmlhttp;
    }
    //获取元素函数
    function $(elem){
    return typeof elem == "string" ? document.getElementById(elem) : elem;
    }
    //读取数据函数
    function Read(){
    if(arguments.length!=0){//如果有参数传递过来,则证明你点击了某个页码
    var e = arguments[0] || window.event; //标准化事件对象
    var obj = e.target || e.srcElement; //获取事件对象,你点击的那个页码元素
    Current_page = parseInt(obj.innerHTML);//获取元素中的数字值,证明你要请求的是第几页
    $("msg").innerHTML = "当前为第"+Current_page+"页";//提示信息:当前请求的页
    }
    PageCount = $("edit_count").value;//获取文本框的值
    if(PageCount.length == 0){ //如果文本框为空
    PageCount = 5; //默认每页显示5条数据
    }
    var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量.
    ajax.open("post","ajax_page.asp?action=readpagecount="+PageCount+" current_page="+Current_page,true);//设置请求方式,请求的网页,url的action参数为read,异步请求
    ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称
    if(ajax.readyState == 4){//数据返回成功
    if(ajax.status == 200){//http请求状态码返回ok
    var xmlData = ajax.responseXML;//以xml格式接收返回的数据,并保存在xmlData变量里
    All_Record = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;
    All_page = All_Record / PageCount;
    var page_list = $("page");
    while(page_list.childNodes.length!=0){
    page_list.removeChild(page_list.childNodes[0]);
    }
    for(var i=0;iMath.ceil(All_page);i++){ //动态创建页码列表
    var li = document.createElement("li");
    li.innerHTML = i+1;//因为i以0开始,所以要+1显示页码
    li.onclick = function(e){Read(e)};//为每个li的页码绑定单击事件
    page_list.appendChild(li);//将生成好的页码元素放到div里
    }
    var list = xmlData.getElementsByTagName("list");//在返回的数据里,获取所有list标签
    if(list.length!=0){
    var t = document.getElementById("a");//获取展示数据的表格
    while(t.rows.length!=0){ //在读取数据时如果表格已存在行.一律删除
    t.removeChild(t.rows[0]);
    }
    for(var i=0;ilist.length;i++){
    var tr = t.insertRow(t.rows.length);//有几个list就为表格增加几行.
    var td = tr.insertCell(0);//第一个单元格存放数据编号
    td.innerHTML = list[i].childNodes[0].firstChild.nodeValue;
    var td = tr.insertCell(1);//第二个单元格存放数据内容
    td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;
    }
    }
    }
    }
    }
    ajax.send(null);//提交请求,参数为null
    }
    Read();//运行Read函数
    /script>
    /body>
    /html>

    上面是本次ajax分页教程的前端代码,html部份我们就不讲了.直接开始script中的内容.首先我们定义了4个全局变量,分别是:

    All_page:总页数,创建页码的根据
    All_Record:数据总条数,All_Record/PageCount=All_page 得到总页数
    Current_page:当前请求的页码.传送给服务端
    PageCount:每页显示的条数,传送给服务端
    然后依次是我写的3个自定义函数,分别为:
    ajax_xmlhttp();该函数的作用是创建一个可用的XMLHTTPRequest对象,如果你还不知道什么是XMLHTTPRequest.请了解什么是XMLHTTPRequest
    $(elem);获取元素的函数,根据页面中元素的id来对某个元素的引用,其实就是document.getElementById的缩写与引用,写成函数以后直接可以使用$("元素id")即可获取该元素.
    Read():读取数据的函数.也是我们的老朋友了,在前几篇的教程里都有使用.下面我们仔细来分析下,这一次我们在Read()函数里做了些什么.
    (1):if(arguments.length!=0)这是在判断在调用Read()函数时,是否有参数传递过来.如果有参数,则证明你点击了某个页码而触发了Read().这时我们应该获取该页码,将页码数字赋值给Crrent_page变量.点击了解:arguments
    (2):var e = arguments[0] || window.event;标准化事件对象,arguments[0]是为了FF浏览器,window.event是IE浏览器
    (3):var obj = e.target || e.srcElement;标准了事件对象以后,我们要获取事件的源.也就是说是那个元素触发了Read()函数.此时的obj就是你点击的那个页码元素.
    (4):Current_page = parseInt(obj.innerHTML);获取元素中的数字值,证明你要请求的是第几页,在下面的请求中会把该值发送给服务端.
    (5):PageCount = $("edit_count").value;获取文本框里的值,如果你没有向文本框里输入值.那么每页默认显示5条数据.再声明一次,以前讲过的内容我们不再重复讲解.也就是说关于上面的代码我在该教程里没有解释到的.在以前的教程里会找到相关解释.
    (6):ajax.open("post","ajax_page.asp?action=readpagecount="+PageCount+" current_page="+Current_page,true);我们在请求的Url里将Pagecount与Current_page变量传递给了服务端,服务端接收到这两个变量以后会经过判断.如果PageCount为空那么将默认为5.如果Current_page为空则默认为第1页,然后会将相应的数据传回给客户端.
    (7):All_Record = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;从服务端接收一个allrecord标签元素.该元素包含了一个数字值,该数字值是数据的总条数.
    (8):All_page = All_Record / PageCount;用总条数All_Record除以PageCount等于总页,得出有几页数据以后.我们会根据All_page来创建当前页码列表.
    (9):var page_list = $("page");获取存放页码列表的那个div元素.while(page_list.childNodes.length!=0)循环遍历该div内的子元素.将其子元素全部删除.每次根据当前页显示的条数不同,会生成不同的页码,所以必须删除上次请求生成的页码列表,当然你也可以改进我这种做法!如果你还不了解什么是子元素或如何删除子元素,请参阅:childNodes与removeChild
    (10):for(var i=0;i Math.ceil(All_page);i++);使用一个for循环根据总页数来动态的生成页码列表,如果All_page为5,则生成5个页码.因为考虑到了会有余数.我使用了Math.ceil.如果你还不知道Math与ceil的作用,请参阅:Math与ceil
    (11):var li = document.createElement("li");创建一个li元素,并赋值给一个名字为li的变量.li.innerHTML= i+1;在li元素内写入页码数值.因为i是从0开始的,所有要加1.
    (12):li.onclick = function(e){Read(e)};为每个li元素绑定单击事件,这个是重点必须要理解清楚.我们向li绑定了Read(e)函数,并且利用e参数传递了事件对象.当你点击每个页码的时候会再次触发Read函数来读取数据.这个时候运行的Read(e)函数,是带有参数的.我们正是从参数内获得了你请求的页码,然后赋值给Current_page,利用url发送给了服务端.
    你注意一下在script脚本部份里的最后一行:Read();此时Read()没有参数,并且只有当打开页面或刷新页面时才会执行这个Read(),此时的Read()向服务端发送的Current_page是空的.PageCount默认是5,这个时候服务端接收到空的页码,只会读取5条数据给你.与此同时我也从服务端接收了数据的总条数,利用总条数除以每页显示的条数.创建了页码.并且为每个页码绑定了 Read(e)函数.只有当你点击这些页码时带有参数的Read(e)再次执行数据读取.但此时的读取已经向服务端发送了页码.你明白了吗?
    (13):page_list.appendChild(li);为li写好了页码,绑定了事件以后添加到上面被获取的div元素里.请参阅:appendChild

    哦了,上面讲述的部份是本次ajax分页教程中前端的核心部份,没有讲述的内容在前几篇的ajax教程里都有讲解.下面我们来看下服务端的源码并分析该源码
    复制代码 代码如下:

    !--#include file="Conn.Asp"-->
    %
    '出自:http://Www.Web666.Net
    '作者:康董
    '如需转载请务必保留以上信息
    '定义一个变量,来保存xml数据
    xml="?xml version='1.0' encoding='gb2312'?>body>"
    action=Request.QueryString("action") '使用get方式接受一个action来判断客户端想要执行什么操作
    Select case action
    case "read" '如果为read则执行读取数据的操作
    Call Read
    case else
    xml = xml"msg>请求参数错误,请不要试图非法操作!/msg>"
    End Select
    xml=xml"/body>"
    Response.Clear
    Response.ContentType="text/xml"
    Response.CharSet="gb2312"
    Response.write xml
    Response.End

    Sub Read '自定义的读取数据过程
    Call OpenConn '打开数据库链接
    Current_Page = Request("Current_Page") '当前的页码
    PageCount = request("PageCount") '当前页显示的条数
    xml = xml"page>"pagecount"/page>"
    If Current_Page = "" Or Not IsNumEric(Current_Page) Then
    Current_Page = 1
    End If
    If PageCount = "" Or Not IsNumEric(PageCount) Then '判断条数输入是否正确
    PageCount = 5
    End If
    Sql = "Select count(*) From page_table" '读取page_table表中共有多少条数据
    Set Rs = Conn.Execute(Sql) '执行sql语句
    xml = xml"allrecord>"Rs(0)"/allrecord>"
    If Current_Page = 1 Then '如果是第1页
    Sql = "Select Top "PageCount" * From page_table order by id desc"
    Else
    Sql = "Select Top "PageCount" * From page_table where id(Select Min(id) From (Select Top "((Current_Page-1)*PageCount)" id From page_table order by id desc)) order by id desc"
    End If
    Set Rs=Conn.Execute(Sql)
    While Not Rs.Eof
    xml = xml"list>"
    xml = xml"id>"Rs("id")"/id>"
    xml = xml"content>"Rs("content")"/content>"
    xml = xml"/list>"
    Rs.MoveNext '下一条
    Wend
    End Sub
    %>

    上面是本次ajax分页教程实例中请求的服务端网页源码.我在服务端使用的是Asp技术,当然你也可以使用jsp,php,.net等轻松模拟.关于在服务端输出xml数据.在前几篇的ajax教程里我都有讲解.所以我们从该源码中的Read读取过程开始讲起:

    1、Current_Page = Request("Current_Page") :接收客户端ajax使用url参数传递过来的Current_page,请求的页码
    2、PageCount = Request("PageCount") :接收客端ajax使用url参数传递过来的PageCount,每页显示的条数
    3、然后分别判断Current_Page是否为空.或者是否为数字.如果不符合条件.则将Current_page等于1.如果PageCount也为空,或者不是数字,则将PageCount等于5,也就是每页读取5条数据
    4、Sql = "Select count(*) From page_table"这条sql的作用是读取表内一共有多少条数据,也就是我们在前端代码所说的总条数.将这个总条数读取以后并保存在一个allrecord的元素里.然后传回给客户端.客户端每次读取数据都会获取这个数字.以该数字为依据,进行页码的创建.
    5、If Current_Page = 1 Then 判断Cruuent_Page是否为1,如果为1则执行:Sql = "Select Top "PageCount" * From page_table order by id desc" 该sql语句的意思很简单,只读取表内的"PageCount"条数据.如果你在前端没有设置要读取的条数.那么 PageCount等于5,也就是只读取5条数据.读取顺序为desc,倒序读取!
    6、Else如果Crrent_Page不等于1,只有在你点击了页码列表中非第1页时,Current_Page才不会是1,那么就执行:Sql = "Select Top "PageCount" * From page_table where id(Select Min(id) From (Select Top "((Current_Page-1)*PageCount)" id From page_table order by id desc)) order by id desc",这条sql语句是分页的核心.他的大致意思是说:在表中读取PageCount条数据.这些数据的id必须小于已经显示出来的数据中id最小的那条数据.比如你点击的是第3页,每页显示的条数为5条.那么这第三页中要显示的数据的id,必须要小于第二页id最小的那条数据,因为是倒序读取.你明白了吗?如果你根本无法理解该Sql的意思.请恶补Sql的相关知识.下面的代码是从数据库里读取数据,我在前几篇都有过详细的讲解.ajax分页至此完毕!
    提示:<!--#include file="Conn.Asp"-->Conn.asp是我的数据库链接文件.没什么特别.你应该可以自己写一个出来.网上也有很多现成的代码.本次读取的数据库表名为:page_table 字段分别为ID(自动编号),content(数据内容)
    今天就讲到这里,有什么不明白地方.请加 ajax技术交流群:110167482
    您可能感兴趣的文章:
    • 用jQuery中的ajax分页实现代码
    • JQuery+Ajax无刷新分页的实例代码
    • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
    • php,ajax实现分页
    • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
    • jQuery DataTables插件自定义Ajax分页实例解析
    • 使用PHP+JQuery+Ajax分页的实现
    • php+ajax实现无刷新分页的方法
    • 基于Jquery+Ajax+Json的高效分页实现代码
    • AJAX分页效果简单实现
    上一篇:Ajax添加数据与删除篇实现代码
    下一篇:Ajax无刷新Url提交页面
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax读取数据之分页显示篇实现代码 Ajax,读取,数据,之,分页,