js分页效果

 

 

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script>

              //创建xhr对象

              function XHR(){

                 var xhr;

                  if(window.XMLHttpRequest){// ie7+   火狐  谷歌  

                    xhr=new XMLHttpRequest();  

                  }else{

                       xhr = new ActiveObject("Microsoft.XMLHTTP");   //ie6

                  }

 

                  return xhr;

 

              }

 

                var pageSize=10; 

                var index=0;//全局变量

                var response;

                   function uu(){

                         

                                for(var k=index*pageSize;k<index*pageSize+pageSize;k++){

                                                       

                                                         var tr=document.createElement("tr");

                                                          //name

                                                         var name=document.createElement("td");

                                                         name.innerHTML=response[k].name;

                                                         tr.appendChild(name);

                                                         //age

                                                               var age=document.createElement("td");  

                                                                   age.innerHTML=response[k].age;

                                                                   tr.appendChild(age);

                                                                  

                                                              //sex

                                                              var sex=document.createElement("td");  

                                                                  sex.innerHTML=response[k].sex;

                                                                   tr.appendChild(sex);

                                                                  

                                                              //phone

                                                               var phone=document.createElement("td");  

                                                                   phone.innerHTML=response[k].phone;

                                                                   tr.appendChild(phone);

                                                                 

                                                              //address

                                                               var address=document.createElement("td");  

                                                                   address.innerHTML=response[k].address;

                                                                   tr.appendChild(address);

                                                                  

                                                              //qq

                                                               var qq=document.createElement("td");  

                                                                   qq.innerHTML=response[k].qq;

                                                                   tr.appendChild(qq);

                                                                 

                                                         tbody.appendChild(tr);

                                                      }

                   }

               window.onload=function(){

                      

                         var xhr=XHR();

                         xhr.open("post","person.json",true);

                        

 

                         xhr.onreadystatechange=function(){

                               var box=document.getElementById("box");

                                  var box_span=box.getElementsByTagName("span");

                                  var tbody=document.getElementById("tbody");

                                  var currentPage=document.getElementById("currentPage");

                                  var prev=document.getElementById("prev");

                                  var next=document.getElementById("next");

                                  if(xhr.readyState==4&&xhr.status==200){

                                          response=JSON.parse(xhr.responseText);                                          

                                          //totalPage  总页数=数据的长度/每页显示的记录数 

                                           var totalPage=0;

                                              // 每页显示的记录数 

                                          var num=response.length;//数据的长度

 

                                              //totalPage=num/pageSize;

                                             

                                              //判断数据长度/每页显示的记录数 如果不能整除时也算一页

                                                  if(num/pageSize > parseInt(num/pageSize)){   

           totalPage=parseInt(num/pageSize)+1;   

      }else{   

          totalPage=parseInt(num/pageSize);   

      }   

                                             

                                            console.log(totalPage);

                                            //总共页数

                                            var totalPage_a=document.createElement("a");

                                            totalPage_a.innerHTML="总共"+totalPage+"页";

                                            box.appendChild(totalPage_a);

                                            //当前是第1页

                                            var currentPage=document.createElement("a");

                                             currentPage.innerHTML="当前是第1页";

 

                                             currentPage.id="currentPage";

                                            box.appendChild(currentPage);

 

                                            //循坏分页  totalPage

                                             for(var i=0;i<totalPage;i++){

                                                 var span=document.createElement("span");

                                                 span.setAttribute("index",i);

                                                 span.innerHTML="第"+(i+1)+"页";

                                                 box.appendChild(span);

 

                                                if(i==0){

                                                 span.innerHTML="首页";

                                                 span.className="on";

                                                }

                                                if(i==totalPage-1){

                                                 span.innerHTML="尾页";

                                                }

 

                                             }

                                           //上一页

                                             var prev=document.createElement("a");

                                             prev.innerHTML="上一页";

                                             prev.id="prev";

                                             box.appendChild(prev);

 

                                           //下一页

                                            

                                             var next=document.createElement("a");

                                             next.innerHTML="下一页";

                                             next.id="next";

                                             box.appendChild( next);

                                           

                                           //对象每页按钮添加事件

                                           for(var j=0;j<box_span.length;j++){

                                                box_span[j].onclick=function(){

                                                      index=Number(this.getAttribute("index"));

                                                      console.log(index);

                                                      tbody.innerHTML=" ";

                                                      currentPage.innerHTML="当前是第"+(index+1)+"页";                                                   

                                                   

                                                      for(var m=0;m<box_span.length;m++ ){

                                                        box_span[m].className="";

                                                      }

                                                       this.className="on";

                                                        uu();

                                               

                                                }

                                          }

                                          

                                           //点击上一页

                                           prev.onclick=function(){

                                                    console.log(index);

                                                   if(index>=5){

                                                      box_span[index].style.display="none";

                                                      //box_span[index].style.display="inline-block";

                                                       box_span[index-1].style.display="inline-block";

                                                   }

                                                   index--;

                                                 

                                                   if(index<=0){

                                                     index=0;

                                                   }

                                                   currentPage.innerHTML="当前是第"+(index+1)+"页";

                                                    tbody.innerHTML=" ";

                                                  

                                                     for(var n=0;n<box_span.length;n++){

                                                       box_span[n].className="";

                                                     }

                                                    box_span[index].className="on";

                                                   uu();

                                            

                                               

                                           }

 

                                         //点击下一页

                                         next.onclick=function(){

 

                                                    index++;

                                                    if(index>=totalPage){

                                                    index=totalPage-1;

                                                    }

                                                    currentPage.innerHTML="当前是第"+(index+1)+"页";

                                                     tbody.innerHTML=" ";

                                                  

                                                      for(var n=0;n<box_span.length;n++){

                                                       box_span[n].className="";

                                                       }

                                                    box_span[index].className="on";

                                                    

                                                     uu();

 

                                                   // 分页数大于5 页时,对应index的分页显示,它的上一个隐藏

                                                   if(index>=5){

                                                      box_span[index].style.display="inline-block";

                                                       box_span[index-1].style.display="none";

                                                   }

                                         }

 

                                         uu();

                                  }

                                // 分页数大于5 页时,隐藏5后面的分页,最后一个不隐藏

                              for(var h=5;h<box_span.length-1;h++){

                               box_span[h].style.display="none";

 

                                }                              

 

                         }

                         xhr.send();

               }

</script>

<style>

             *{padding: 0px;margin:0px;}

             #box a{margin-left: 10px;}

             #box span{margin-left: 10px;}

             .on{background-color: red;}

</style>

</head>

<body>

       <table border="1" id="tab">

    <thead>

          <tr>

            <th>name</th>

            <th>age</th>

            <th>sex</th>

            <th>phone</th>

 

            <th>address</th>

            <th>qq</th>

          </tr>

        </thead>

       <tbody id="tbody">

       

       </tbody>

 </table>

  <div id="box">  

            

  </div>

</body>

</html>

 

posted on 2017-05-05 14:43  熊熊之火  阅读(1432)  评论(0编辑  收藏  举报

导航