javascript實現瀏覽器端列表分頁示例

<body> 
<!–一塊用來顯示列表的區域–> 
<p id="comment"> </p> 
 
<!–一塊用來放置頁碼的區域–> 
<p id="pager" > </p> 
 
<script language="javascript" > 
/*全局數組,保存評論內容*/ 
var arrList = new Array(); 
/*標記當前頁碼*/ 
var nCurPage = 0; 
/*每頁大小,一個常量*/ 
var PAGE_SIZE = 5; 
 
/*一個工具函數,可以很方便的根據id得到標簽對象*/ 
function $(id) 

    return document.getElementById(id); 

 
/**
* 添加一個評論到全局列表
**/ 
function addCmt(comment) 

    arrList.push(comment); 

 
/**
* 根據當前位置和每頁大小來刷新顯示
**/ 
function display() 

    totalPage = arrList.length/PAGE_SIZE; 
     
    /*顯示當前頁的內容*/ 
    $("comment").innerHTML = "";// 先清空 
    for (c = PAGE_SIZE * nCurPage; c < arrList.length && c < PAGE_SIZE *(nCurPage+1); c++) 
        $("comment").innerHTML += "Page " + nCurPage + ": " + arrList[c] + "<br/>"; 
 
    /*顯示分頁欄目*/ 
    $("pager").innerHTML = "";// 先清空         
    for (i = 0; i < totalPage; i ++) 
        $("pager").innerHTML += "<a href='javascript:OnPageChanged(" + i + ")'>" + i + "</a>   "; 

 
/**
* 用戶點擊page欄的數字
* 參數: pageset = 用戶點擊的頁碼
**/ 
function OnPageChanged(pageset) 

    nCurPage = pageset; 
    display(); 

 
/**
* 用戶點擊添加評論按鈕
* 從文本框裡面取出內容,添加到全局列表,
* 然後刷新一些顯示
*/ 
function OnAddComment() 

    addCmt($("cmt").value); 
    display(); 

 
</script> 
<input type="text" name="cmt" value="hello"/> 
<input type="button" value="添加" onclick="OnAddComment();"/> 
</body> 

 

摘自 開心樂源的專欄

發佈留言