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>的位置，以及分页所要用到的上下页及页码的代码

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

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

  1 <script>
  2      $(document).ready(function(){
  3       $.ajax({
  4        type:"POST",
  5        url:"##",
  6        contentType:"application/json",
  7        dataType:'json',
  8        data:id,
  9        async:true,
 10        success:function(data){
 11            for(var i=0;i<data.news.length;i++){
 12                  var d=data.news[i].releaseTime.split(" ");
 13                  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>");
 14                  $("#all").append(li);
 15              }
 16              var a = document.getElementById("all").getElementsByTagName("li");
 17              var zz =new Array(a.length);
 18              for(var i=0;i <a.length;i++)
 19              { zz[i]=a[i].innerHTML } //div的字符串数组付给zz
 20              var pageno=1;               //当前页
 21              var pagesize=10;            //每页多少条信息
 22              if(zz.length%pagesize==0)
 23              {var  pageall =zz.length/pagesize }
 24              else
 25              {var  pageall =parseInt(zz.length/pagesize)+1}       //一共多少页
 26              $("#p").text(pageall);      //将pageall的值存放到div中，便于下次使用
 27              change(1,pageall,zz);
 28        }
 29     });
 30 })
 31  
 32  
 33  
 34  
 35  var k;
 36 function change(e,all,zu){
 37     zz=zu;    
 38     var pagesize=10; 
 39     pageall=all;
 40     pageno=e;
 41     if(e <1)//如果输入页<1页
 42     { e=1;pageno=1}//就等于第1页 ， 当前页为1
 43     if(e>pageall)//如果输入页大于最大页
 44     {e=pageall;pageno=pageall}//输入页和当前页都=最大页
 45     document.getElementById("all").innerHTML="";//全部清空
 46     for(var i=0;i<pagesize;i++)
 47     {
 48         var div =document.createElement("li");//建立div对象
 49         div.innerHTML=zz[(e-1)*pagesize+i];//建立显示元素
 50         document.getElementById("all").appendChild(div);//加入all中
 51         if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
 52             break
 53     }
 54     var ye="";
 55     for(var j=1;j<=pageall;j++)
 56     {
 57         if(e==j)
 58         {ye=ye+"<span><a href='#' onClick='change1("+j+")' style='color:#FF0000'>"+j+"</a></span> "}
 59         else
 60         {ye=ye+"<a href='#' onClick='change1("+j+")'>"+j+"</a> "}
 61     }
 62     document.getElementById("a1").innerHTML=pageall;
 63     document.getElementById("a2").innerHTML=pageno;
 64     document.getElementById("a3").innerHTML=ye;
 65  
 66     /*如果当前是第一页则：*/
 67  
 68     if (pageno == 1)
 69     {
 70         $('#down').hide();//隐藏
 71     }else {
 72         $('#down').show();//显示
 73     }
 74  
 75     /*如果是最后一页则：*/
 76  
 77     if (pageno == pageall)
 78     {
 79         $('#up').hide();//隐藏
 80     }else {
 81         $('#up').show();//显示
 82     }
 83     k=zu;
 84    
 85 }
 86 function change1(e){
 87     
 88     zz=k;    
 89     
 90     var pagesize=10; 
 91     pageall=$("#p").text();
 92     pageno=e;
 93     if(e <1)//如果输入页<1页
 94     { e=1;pageno=1}//就等于第1页 ， 当前页为1
 95     if(e>pageall)//如果输入页大于最大页
 96     {e=pageall;pageno=pageall}//输入页和当前页都=最大页
 97     document.getElementById("all").innerHTML="";//全部清空
 98     for(var i=0;i<pagesize;i++)
 99     {
100         var div =document.createElement("li");//建立div对象
101         div.innerHTML=zz[(e-1)*pagesize+i];//建立显示元素
102         document.getElementById("all").appendChild(div);//加入all中
103         if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
104             break
105     }
106     var ye="";
107     for(var j=1;j<=pageall;j++)
108     {
109         if(e==j)
110         {ye=ye+"<span><a href='#' onClick='change1("+j+")' style='color:#FF0000'>"+j+"</a></span> "}
111         else
112         {ye=ye+"<a href='#' onClick='change1("+j+")'>"+j+"</a> "}
113     }
114     document.getElementById("a1").innerHTML=pageall;
115     document.getElementById("a2").innerHTML=pageno;
116     document.getElementById("a3").innerHTML=ye;
117  
118     /*如果当前是第一页则：*/
119  
120     if (pageno == 1)
121     {
122         $('#down').hide();//隐藏
123     }else {
124         $('#down').show();//显示
125     }
126  
127     /*如果是最后一页则：*/
128  
129     if (pageno == pageall)
130     {
131         $('#up').hide();//隐藏
132     }else {
133         $('#up').show();//显示
134     }
135 }
136  
137  
138  
139  
140     </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都触发第二个函数即可。