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

最新推荐文章于 2021-01-01 11:56:49 发布

开心乐源

最新推荐文章于 2021-01-01 11:56:49 发布

阅读量1.9k

点赞数

分类专栏：脚本技术文章标签： javascript 浏览器 ul sort

本文链接：https://blog.csdn.net/hacode/article/details/7593352

版权

脚本技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

PASTEBIN链接:http://pastebin.com/0N7aSTZe

JS部分代码

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

HTML部分代码

<body>
<!-- 评论内容 -->
<input type="text" name="cmt" value="hello"/>
<!-- 提交按钮 -->
<input type="button" value="添加" οnclick="OnAddComment();"/>
<!--一块用来显示列表的区域-->
<div id="comment" style="height:100px;"> </div>
<!--一块用来放置页码的区域-->
<div id="pager" > </div>
</body>

开心乐源

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现浏览器端列表分页示例

PASTEBIN链接:http://pastebin.com/0N7aSTZeJS部分代码/*全局数组，保存评论内容*/var arrList = new Array();/*标记当前页码*/var nCurPage = 0;/*每页大小，一个常量*/var PAGE_SIZE = 5;/*一个工具函数，可以很方便的根据id得到标签对象*/
复制链接

扫一扫