js实现静态分页

不喜欢说废话，我把代码贴出来，自己去试试，不明白的地方可以留言哈~

html:

[html] view plain copy print?

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

[html] view plain copy print?

1. <table>  
2.        <thead>  
3.            <tr>  
4.                <th>数目</th>  
5.                <th>姓名</th>  
6.                <th>班级</th>  
7.                <th>备注</th>  
8.            </tr>  
9.        </thead>             
10.        <tbody id= 'record'>  
11.            <tr><th>1</th><th>姓名1</th><th>1</th><th>备注</th></tr>  
12.            <tr><th>2</th><th>姓名2</th><th>1</th><th>备注</th></tr>  
13.            <tr><th>3</th><th>姓名3</th><th>2</th><th>备注</th></tr>  
14.            <tr><th>4</th><th>姓名4</th><th>3</th><th>备注</th></tr>  
15.            <tr><th>5</th><th>姓名5</th><th>5</th><th>备注</th></tr>  
16.            <tr><th>6</th><th>姓名6</th><th>4</th><th>备注</th></tr>  
17.            <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>  
18.            <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>  
19.            <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>  
20.            <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>  
21.            <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>  
22.            <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>  
23.            <tr><th>7</th><th>姓名7</th><th>6</th><th>备注</th></tr>  
24.        </tbody>  
25.        <tfoot id='page'></tfoot>     
26.     </table>    

JS方法

[html] view plain copy print?

1. <span style="font-size:14px;"><script>  
2.     function Paging(index){  
3.             var RankInfo = document.getElementById('record');  
4.             var totalPage = RankInfo.rows.length; //总条数  
5.             var pageSize = 5;//每页显示条数  
6.             var pageNumber = Math.ceil(totalPage/pageSize); //总页数  
7.             var currentPage = index;//当前页数  
8.             var start_row = (currentPage-1)*pageSize;//开始显示的行  
9.             var end_row = currentPage*pageSize;//结束显示的行  
10.                 end_row = (end_row > totalPage) ? totalPage : end_row;  
11.             for(var i=0;i<totalPage;i++){  
12.                 var irow = RankInfo.rows[i];  
13.                 if(i>=start_row && i<end_row){  
14.                     irow.style.display = 'table-row';  
15.                 }else {  
16.                     irow.style.display = 'none';  
17.                 }  
18.             }     
19.             var pageHTML = '';  
20.                 pageHTML += "<a class='p_first' href=\"javascript:Paging(1)\" title=\"上一页\">上一页</a>";  
21.                 var up =parseInt(currentPage)-1;  
22.                 if(up<1){up =1;}  
23.                 pageHTML += "<a class='p_prev' href=\"javascript:Paging("+up+")\" title=\"上一页\">上一页</a>";  
24.                 pageHTML+="<span>"+currentPage+"/"+pageNumber+"</span>";          
25.   
26.             var next =parseInt(currentPage)+1;  
27.                 if(next >pageNumber){ next = pageNumber ;}  
28.                 pageHTML += "<a class='p_next js_page' href=\"javascript:Paging("+next+")\" title=\"下一页\">下一页</a>";       
29.                 pageHTML += "<a  class='p_last js_page' href=\"javascript:Paging("+pageNumber+")\" title=\"下一页\">下一页</a>";    
30.             if(totalPage == 0){  
31.                 $("#page").html('');  
32.             }else {  
33.                 $("#page").html(pageHTML);  
34.             }  
35.           }      
36.   
37.    Paging(1);  
38. </script></span>  

样式问题就自己调试了。