ajax获取动态列表数据后的分页问题

ajax获取动态列表数据后的分页问题

这是我在写前台网站时遇到的一个分页问题，由于数据是通过ajax的方式来请求得到的，如果引入相应的js文件来做分页，假如只是静态的填放数据到列表各项内容中（列表条数固定），确实不会出现问题。但是要从ajax中获取数据后要动态添加<li>至<ul>并实现分页，js文件却达不到想要的分页效果。

 

（原因：这是由于js脚本文件会在ajax完成请求之前执行，那么分页用到的js会先执行，而ajax中的动态添加<li>过程实现后确无法执行到分页的代码）

 

操作过程

1.首先，需要引入用到的JS插件

   在这里只需要 引入jquery的插件，下载可以点击打开链接  （相关的CSS样式可自行添加）

<script src="js/jquery.min.js" type="text/javascript"></script>


2.接下来便是设置ajax取得数据列表放入对应<ul>的位置，以及分页所要用到的上下页及页码的代码

<div>
    <ul id="all">
                            
    </ul>
     <div class="page">
            <a id="down" href="#" onClick="change1(--pageno)">上一页</a>　　
            <span id="a3"></span><a id="up" href="#" onClick="change1(++pageno)">下一页</a>
            <span class="ho">第<span id="a2"></span>/<span id="a1"></span>页</span></div></div>

3、利用ajax请求到数据，并写上需要用到的两个function，代码如下：

<script>
     $(document).ready(function(){
      $.ajax({
       type:"POST",
       url:"##",
       contentType:"application/json",
       dataType:'json',
       data:id,
       async:true,
       success:function(data){
           for(var i=0;i<data.news.length;i++){
                 var d=data.news[i].releaseTime.split(" ");
                 var li=$("<li><div class='title'><h6><a href='announcementsArticle.html?newsId="+data.news[i].id+"'>"+data.news[i].themeName+"</a></h6><span class='date'>"+d[0]+"</span></div> </li>");
                 $("#all").append(li);
             }
             var a = document.getElementById("all").getElementsByTagName("li");
             var zz =new Array(a.length);
             for(var i=0;i <a.length;i++)
             { zz[i]=a[i].innerHTML } //div的字符串数组付给zz
             var pageno=1;               //当前页
             var pagesize=10;            //每页多少条信息
             if(zz.length%pagesize==0)
             {var  pageall =zz.length/pagesize }
             else
             {var  pageall =parseInt(zz.length/pagesize)+1}       //一共多少页
             $("#p").text(pageall);      //将pageall的值存放到div中，便于下次使用
             change(1,pageall,zz);
       }
    });
})
 
 
 
 
 var k;
function change(e,all,zu){
    zz=zu;    
    var pagesize=10; 
    pageall=all;
    pageno=e;
    if(e <1)//如果输入页<1页
    { e=1;pageno=1}//就等于第1页 ， 当前页为1
    if(e>pageall)//如果输入页大于最大页
    {e=pageall;pageno=pageall}//输入页和当前页都=最大页
    document.getElementById("all").innerHTML="";//全部清空
    for(var i=0;i<pagesize;i++)
    {
        var div =document.createElement("li");//建立div对象
        div.innerHTML=zz[(e-1)*pagesize+i];//建立显示元素
        document.getElementById("all").appendChild(div);//加入all中
        if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
            break
    }
    var ye="";
    for(var j=1;j<=pageall;j++)
    {
        if(e==j)
        {ye=ye+"<span><a href='#' onClick='change1("+j+")' style='color:#FF0000'>"+j+"</a></span> "}
        else
        {ye=ye+"<a href='#' onClick='change1("+j+")'>"+j+"</a> "}
    }
    document.getElementById("a1").innerHTML=pageall;
    document.getElementById("a2").innerHTML=pageno;
    document.getElementById("a3").innerHTML=ye;
 
    /*如果当前是第一页则：*/
 
    if (pageno == 1)
    {
        $('#down').hide();//隐藏
    }else {
        $('#down').show();//显示
    }
 
    /*如果是最后一页则：*/
 
    if (pageno == pageall)
    {
        $('#up').hide();//隐藏
    }else {
        $('#up').show();//显示
    }
    k=zu;
   
}
function change1(e){
    
    zz=k;    
    
    var pagesize=10; 
    pageall=$("#p").text();
    pageno=e;
    if(e <1)//如果输入页<1页
    { e=1;pageno=1}//就等于第1页 ， 当前页为1
    if(e>pageall)//如果输入页大于最大页
    {e=pageall;pageno=pageall}//输入页和当前页都=最大页
    document.getElementById("all").innerHTML="";//全部清空
    for(var i=0;i<pagesize;i++)
    {
        var div =document.createElement("li");//建立div对象
        div.innerHTML=zz[(e-1)*pagesize+i];//建立显示元素
        document.getElementById("all").appendChild(div);//加入all中
        if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
            break
    }
    var ye="";
    for(var j=1;j<=pageall;j++)
    {
        if(e==j)
        {ye=ye+"<span><a href='#' onClick='change1("+j+")' style='color:#FF0000'>"+j+"</a></span> "}
        else
        {ye=ye+"<a href='#' onClick='change1("+j+")'>"+j+"</a> "}
    }
    document.getElementById("a1").innerHTML=pageall;
    document.getElementById("a2").innerHTML=pageno;
    document.getElementById("a3").innerHTML=ye;
 
    /*如果当前是第一页则：*/
 
    if (pageno == 1)
    {
        $('#down').hide();//隐藏
    }else {
        $('#down').show();//显示
    }
 
    /*如果是最后一页则：*/
 
    if (pageno == pageall)
    {
        $('#up').hide();//隐藏
    }else {
        $('#up').show();//显示
    }
}
 
 
 
 
    </script>

4、<div style="display" id="p"></div> //用来存放总页数，放置在body中

*注意看上面的代码中success回调函数中我先调用了一次change（1,all,zz）  这是进行了第一页的分页操作，并且我定义了一个全局变量k，当ajax请求完成时change（1,all,zz）这个函数将zz这个数据赋值给了k，这样当进行其他函数执行的时候，由于执行顺序的缘故，k已经变成了数组可以任意调用。（解决了zz这个数据作用的局限性）

 

5.在得到了数组（k）与页数（div的值）的情况下只需要让生成的页码以及上下页中的onclick都触发第二个函数即可。