Javascript 翻页 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset='utf-8'>
  5     <style type="text/css">
  6         #idData {color: red;border: solid;text-align: center;}
  7         a{text-decoration: none;}
  8     </style>
  9 </head>
 10 <body>
 11     <table id="idData" width="70%">        
 12         <tr><td>内容11111</td></tr>
 13         <tr><td>内容22222</td></tr>
 14         <tr><td>内容3333333</td></tr>
 15         <tr><td>内容4444444</td></tr>
 16         <tr><td>内容5555555</td></tr>
 17         <tr><td>内容6666666</td></tr>
 18         <tr><td>内容7777777</td></tr>
 19         <tr><td>内容8888888</td></tr>
 20         <tr><td>内容999999999</td></tr>
 21         <tr><td>内容101010101010</td></tr>
 22         <tr><td>内容1111111111</td></tr>
 23         <tr><td>内容1212121212</td></tr>
 24         <tr><td>内容131313131313</td></tr>
 25         <tr><td>内容14141414</td></tr>
 26         <tr><td>内容11111</td></tr>
 27         <tr><td>内容22222</td></tr>
 28         <tr><td>内容3333333</td></tr>
 29         <tr><td>内容4444444</td></tr>
 30         <tr><td>内容5555555</td></tr>
 31         <tr><td>内容6666666</td></tr>
 32         <tr><td>内容7777777</td></tr>
 33         <tr><td>内容8888888</td></tr>
 34         <tr><td>内容999999999</td></tr>
 35         <tr><td>内容101010101010</td></tr>
 36         <tr><td>内容1111111111</td></tr>
 37         <tr><td>内容1212121212</td></tr>
 38         <tr><td>内容131313131313</td></tr>
 39         <tr><td>内容14141414</td></tr>
 40     </table>
 41     <div id="barcon" name="barcon"></div>
 42     
 43     
 44     <script type="text/javascript">
 45         /**
 46         * 分页函数
 47         * pno--页数
 48         * psize--每页显示记录数
 49         * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 50         * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
 51         **/
 52         goPage(1,10);
 53         function goPage(pno,psize){
 54             var itable = document.getElementById("idData");
 55             var num = itable.rows.length;//表格所有行数(所有记录数)
 56             console.log(num);
 57             var totalPage = 0;//总页数
 58             var pageSize = psize;//每页显示行数
 59             //总共分几页 
 60             if(num/pageSize > parseInt(num/pageSize)){
 61                 totalPage=parseInt(num/pageSize)+1;
 62             }else{
 63                 totalPage=parseInt(num/pageSize);
 64             }
 65             var currentPage = pno;//当前页数
 66             var startRow = (currentPage - 1) * pageSize+1;
 67             var endRow = currentPage * pageSize;
 68                endRow = (endRow > num)? num : endRow;
 69                //console.log(endRow);
 70                //遍历显示数据实现分页
 71             for(var i=1;i<(num+1);i++){
 72                 var irow = itable.rows[i-1];
 73                 if(i>=startRow && i<=endRow){
 74                     irow.style.display = "block";
 75                 }else{
 76                     irow.style.display = "none";
 77                 }
 78             }
 79             var pageEnd = document.getElementById("pageEnd");
 80             /*var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";*/
 81                var tempStr = currentPage +"/"+ totalPage+"页";
 82             if(currentPage>1){
 83                /* tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";*/
 84                 tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
 85             }else{
 86                /* tempStr += "首页";*/
 87                 tempStr += "<上一页";    
 88             }
 89         
 90             if(currentPage<totalPage){
 91                 tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
 92                 /*tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";*/
 93             }else{
 94                 tempStr += "下一页>";
 95                 /*tempStr += "尾页"; */   
 96             }
 97         
 98             document.getElementById("barcon").innerHTML = tempStr;
 99         }
100     </script>
101 </body> 
102 </html>

 

posted @ 2017-08-21 14:12  wǒの湁茡潞釦﹌  阅读(210)  评论(0)    收藏  举报