首页 > 安全资讯 >

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

12-05-23

<body><!--一块用来显示列表的区域--><div id="comment"> </div><!--一块用来放置页码的区域--><div id="pager" > </div><script language="javascript" >/*全局数组,保存评论内容*/var arrList = ne...

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

 


摘自 开心乐源的专栏

相关文章
最新文章
热点推荐