纯js制作页码导航

在网站里面都是ajax爆炸的今天,通过json格式来传递数据，动态加载内容。如果加载的是一个多页的列表页面，需要通过js来生成一个分页的导航。

效果如下：

先计算分页的页数

 1 // JavaScript Document
 2 //计算页数
 3 function calculatePage(total,pageSize)
 4 {
 5     var page=total/pageSize;
 6     if(total%pageSize>0)
 7         return Math.ceil(page);
 8     else
 9         return page;
10 }

生成导航的函数如下：

 1 //分页列表
 2 function make_page_list(total,pageSize,pageIndex,page_sum){ 
 3     html="";
 4     var total_page=calculatePage(total,pageSize);    
 5     var firstPage='getPage('+1+')'; 
 6     var lastPage='getPage('+total_page+')'; 
 7     if(total_page>1){ 
 8            var html='<table cellpadding="0" width="90%" cellspacing="0" height="40" align="center"> <tr>';
 9         if(pageIndex>1){ 
10             html+='<td align="left"><a href="javascript:void(0)" onclick="'+firstPage+'">首页</a>&nbsp;&nbsp;'; 
11         }else{ 
12             html+='<td align="left">首页&nbsp;&nbsp;'; 
13         } 
14         var page=Math.floor(page_sum/2); 
15         
16         var begin=pageIndex-page; 
17         var end=pageIndex+page; 
18         begin=begin<1?1:begin; 
19         
20         var temp=end-begin; 
21         if(temp<(page_sum-1)){ 
22             temp=page_sum-temp-1; 
23             end=end+temp; 
24         }     
25         if(parseInt(end)>parseInt(total_page)){ 
26             temp=end-total_page; 
27             begin=begin-temp; 
28             end=total_page; 
29             begin=begin<1?1:begin; 
30         } 
31         
32         if(pageIndex>1){ 
33             html+='|&nbsp;<a href="javascript:getPage('+(pageIndex-1)+');">上一页</a>&nbsp;'; 
34         }else{ 
35             html+='|&nbsp;上一页&nbsp;'; 
36         } 
37         
38         if(pageIndex<total_page){ 
39             html+='|&nbsp;<a href="javascript:getPage('+(pageIndex+1)+')">下一页</a>&nbsp;'; 
40         }else{ 
41             html+='|&nbsp;下一页&nbsp;'; 
42         } 
43         if(pageIndex<total_page)
44             html+='|&nbsp;<a href="javascript:'+lastPage+';">末页</a></td>'; 
45         else
46            html+='|&nbsp;末页</td>'; 
47         html+='<td align="right">当前页：'+pageIndex+'/'+total_page+'&nbsp;&nbsp;';
48         for(var c=begin;c<=end;c++){ 
49             if(c==pageIndex){ 
50                 html+='&nbsp;['+c+']&nbsp;'; 
51             }else{ 
52                 html+='&nbsp;<a href="javascript:getPage('+c+');">['+c+']</a>'; 
53             } 
54         } 
55         html+='</td></tr></table>';
56     }     
57     return html; 
58 
59 }

其中getPage函数是来获得ajax异步获取第某一页的数据的。你可以通过修改样式来达到不同的显示效果。