js制作页码导航

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异步获取第某一页的数据的。你可以通过修改样式来达到不同的显示效果。

作者： Leo_wl

　　　　

出处： http://www.cnblogs.com/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于js制作页码导航的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did49901