1. 这阵子一直在做一个权限管理系统，用到许多的JS,分页以前都是在后端做。这次想尝试一下在前端做一个纯JS的，找到一篇真的是有意思的文章。大家可以参考一下，不过项目数据量大的情况下请慎用。
  3. <!DOCTYPE html>  
  4. <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <title>分页</title>  
  7.     <script type="text/javascript" src="jquery-1.11.1.js"></script>  
  8.     <style type="text/css">  
  9.         .table{border:solid #FFAEB9; border-width:1px 0px 0px 1px;width: 100%;font-size: 12px;line-height: 21px;text-align:center;}  
  10.         .table thead td{border:solid #FFAEB9; border-width:0px 1px 1px 0px;}  
  11.         .table tbody td{border:solid #FFAEB9; border-width:0px 1px 1px 0px;padding-right: 5px;padding-left: 5px;}  
  12.     </style>  
  13. </head>  
  14. <body>  
  15.     <div style="width:450px;margin:0 auto;">  
  16.     <div id="dataShow" style="width:450px;margin:0 auto;">  
  17.         <table class="table" id="table"></table>  
  18.     </div>  
  19.     <br/>  
  20.     <div id="page" style="width:450px;margin:0 auto;"></div>  
  21.     </div>  
  22. <script type="text/javascript">  
  23. //编造表数据  
  24. //表头  
  25. var head=  
  26.     '<thead><tr>'+  
  27.     '<td> 姓  名 </td>'+  
  28.     '<td> 年  龄 </td>'+  
  29.     '<td> 彦  值* </td>'+  
  30.     '<td> 成  绩 </td>'+  
  31.     '<td> 身 高cm </td>'+  
  32.     '</tr></thead><tbody>';  
  33. //表内容，后台返回的内容可以封装到这里，随时取用，但是如果数据量很大估计会相当耗资源。  
  34. var pageData=[];  
  35. for(var i=1;i<100;i++){  
  36.     var data='<tr>'+  
  37.     '<td>学生'+i+'</td>'+  
  38.     '<td>'+Math.round(Math.random()*20)+'</td>'+  
  39.     '<td>'+Math.round(Math.random()*5)+'颗星</td>'+  
  40.     '<td>'+Math.round(Math.random()*100)+'</td>'+  
  41.     '<td>'+Math.round(Math.random()*200)+'cm</td>'+  
  42.     '</tr>';  
  43.     pageData.push(data);  
  44. }  
  45. //表结尾  
  46. var end='</tbody>';  
  47.   
  48. $(function(){  
  49.     var Count = pageData.length;//记录条数  
  50.     var PageSize=10;//设置每页示数目  
  51.     var PageCount=Math.ceil(Count/PageSize);//计算总页数  
  52.     var currentPage =1;//当前页，默认为1。  
  53.     //造个简单的分页按钮  
  54.     for(var i=1;i<=PageCount;i++){  
  55.     var pageN='<a href="#" selectPage="'+i+'" >第'+i+'页</a>';  
  56.     $('#page').append(pageN);  
  57.     }  
  58.     //显示默认页（第一页）  
  59.     $('#table').empty().append(head);  
  60.     for(i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){    
  61.         $('#table').append(pageData[i]);  
  62.     }  
  63.     $('#table').append(end);  
  64.       
  65.     //显示选择页的内容  
  66.     $('a').click(function(){  
  67.      var selectPage=$(this).attr('selectPage');  
  68.      $('#table').html('');  
  69.         $('#table').append(head);  
  70.         for(i=(selectPage-1)*PageSize;i<PageSize*selectPage;i++){  
  71.             $('#table').append(pageData[i]);  
  72.         }  
  73.         $('#table').append(end);  
  74.     });  
  75. });    
  76. </script>  
  77. </body>  
  78. </html>  
  79. 看别人评论说“”想不通前端做分页有什么意义，分页两个功能：显示，还有就是不需要成数据全部加载（也是最主要的）“” 觉得说的挺对，大家在项目中运用的时候一定要慎重。

此文章为转载文章，正文请看http://blog.csdn.net/liuyeshennai/article/details/50792889