PagerView - JavaScript 分页控件(v1.1)

介绍

PagerView是一个JavaScript分页视图控件, 使用原生的JavaScript代码编写而成. 重写onclick方法, 获取翻页事件, 可用来向服务器端发起AJAX请求.

示例

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

<script type="text/javascript">
<!--
var pager = new PagerView('pager');
pager.itemCount = 301;
pager.size = 5;
pager.onclick = function(index){
	document.getElementById('info').innerHTML = '现在翻到第' + index + '页';
};
pager.render();
//-->
</script>

API文档

查看API文档

开发指导

创建

PagerView生成分页控件的HTML代码, 添加到指定的节点当中. 这个节点一般是div节点. 创建一个PagerView的实例后, 需要设置itemCount(记录条数), size(每页显示记录数), 然后调用render()方法将控件渲染到页面上.

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

<script type="text/javascript">
<!--
var pager = new PagerView('pager');
pager.itemCount = 301;
pager.size = 5;
pager.render();
//-->
</script>

翻页事件

分页控件可以独立运行, 更新自身. 但往往需要捕获翻页事件, 向服务器端获取数据. 只需要将翻页事件的回调函数赋值给onclick属性, 即可在发生翻页事件时调用. 这样的回调函数接受一个参数, 表明当前需要显示第几页.

<script type="text/javascript">
<!--
pager.onclick = function(index){
	// 从服务器端获取数据.
};
//-->
</script>

PagerView本身能自动在翻页事件后更新自身, 如果需要取消翻页事件, 只需要在分页回调函数中返回false. 如果数据的总数是保持不变的, 只需要设置一次itemCount属性即可; 若总数变化, 如变更了查询条件, 则需要在回调函数中更新设置itemCount.

<script type="text/javascript">
<!--
pager.onclick = function(index){
	if(server failed){ // 获取数据失败, 不要更新分页控件.
		return false;
	}
};
//-->
</script>

其它: 3行代码的分页算法

有没有想过, 只用3行代码, 不仅仅是JavaScript, 包括PHP/Java/Python等语言的默认功能(默认库), 都只使用3行代码, 就可计算出分页按钮的起止页码. 我在一个偶然的时候想到这3行代码, 发现它们实现了一个严谨且简单的逻辑:

start = Math.max(1, index - parseInt(maxButtons/2));
end = Math.min(pageCount, start + maxButtons - 1);
start = Math.max(1, end - maxButtons + 1);

// index: 当前页码
// maxButtons: 显示的最多页码数
// pageCount: 最大页码数, 从1计数
// start: 当前要显示的开始页面
// end: 当前要显示的开始页面