javascript实现浏览器端列表分页示例

<body>

<div id="comment"> </div>


<div id="pager" > </div>

<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>

摘自开心乐源的专栏

补充：web前端 , JavaScript ,