純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異步獲取第某一頁的數據的。你可以通過修改樣式來達到不同的顯示效果。