纯js制作页码导航

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

效果如下：

先计算分页的页数

// JavaScript Document
//计算页数
function calculatePage(total,pageSize)
{
    var page=total/pageSize;
    if(total%pageSize>0)
        return Math.ceil(page);
    else
        return page;
}

生成导航的函数如下：

//分页列表
function make_page_list(total,pageSize,pageIndex,page_sum){ 
    html="";
    var total_page=calculatePage(total,pageSize);    
    var firstPage='getPage('+1+')'; 
    var lastPage='getPage('+total_page+')'; 
    if(total_page>1){ 
           var html='<table cellpadding="0" width="90%" cellspacing="0" height="40" align="center"> <tr>';
        if(pageIndex>1){ 
            html+='<td align="left"><a href="javascript:void(0)" onclick="'+firstPage+'">首页</a>&nbsp;&nbsp;'; 
        }else{ 
            html+='<td align="left">首页&nbsp;&nbsp;'; 
        } 
        var page=Math.floor(page_sum/2); 
        
        var begin=pageIndex-page; 
        var end=pageIndex+page; 
        begin=begin<1?1:begin; 
        
        var temp=end-begin; 
        if(temp<(page_sum-1)){ 
            temp=page_sum-temp-1; 
            end=end+temp; 
        }     
        if(parseInt(end)>parseInt(total_page)){ 
            temp=end-total_page; 
            begin=begin-temp; 
            end=total_page; 
            begin=begin<1?1:begin; 
        } 
        
        if(pageIndex>1){ 
            html+='|&nbsp;<a href="javascript:getPage('+(pageIndex-1)+');">上一页</a>&nbsp;'; 
        }else{ 
            html+='|&nbsp;上一页&nbsp;'; 
        } 
        
        if(pageIndex<total_page){ 
            html+='|&nbsp;<a href="javascript:getPage('+(pageIndex+1)+')">下一页</a>&nbsp;'; 
        }else{ 
            html+='|&nbsp;下一页&nbsp;'; 
        } 
        if(pageIndex<total_page)
            html+='|&nbsp;<a href="javascript:'+lastPage+';">末页</a></td>'; 
        else
           html+='|&nbsp;末页</td>'; 
        html+='<td align="right">当前页：'+pageIndex+'/'+total_page+'&nbsp;&nbsp;';
        for(var c=begin;c<=end;c++){ 
            if(c==pageIndex){ 
                html+='&nbsp;['+c+']&nbsp;'; 
            }else{ 
                html+='&nbsp;<a href="javascript:getPage('+c+');">['+c+']</a>'; 
            } 
        } 
        html+='</td></tr></table>';
    }     
    return html; 

} 

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