web开发

pagination组件使用说明

作者：LT  发表于:


jquery.pagination.js 是一款基于bootstrap分页样式的分页插件，具有灵活配置，方便易用的特性。

默认配置参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var defaults = {
	totalData:0,			//数据总条数
	showData:0,				//每页显示的条数
	pageCount:9,			//总页数,默认为9
	current:1,				//当前第几页
	prevCls:'prev',		//上一页class
	nextCls:'next',		//下一页class
	prevContent:'上一页',	//上一页内容
	nextContent:'下一页',	//下一页内容
	activeCls:'active',		//当前页选中状态
	coping:false,					//首页和尾页
	homePage:'首页',				//首页节点内容
	endPage:'末页',				//尾页节点内容
	count:3,							//当前页前后分页个数
	jump:false,							//跳转到指定页数
	jumpIptCls:'jump-ipt',	//文本框内容
	jumpBtnCls:'jump-btn',	//跳转按钮
	jumpBtn:'跳转',					//跳转按钮文本
	callback:function(currPageNmu){}	//回调(参数：当前页码)
};

初始化

  • 必要参数：pageData 数据总条数 showData 每页显示条数
  • 使用 ul 标签容器，并添加BS组件样式 pagination
1
2
3
4
5
6
//HTML
<div class="nav-box">
	<ul class="pagination" id="p1"></ul>
</div>
//JS
$('#p1').pagination({totalData:80, showData:5})

效果

显示’…’和’首页末页’

页码过多时，显示...，显示 首页和末页

1
2
3
4
5
6
//HTML
<div class="nav-box">
<ul class="pagination" id="p2"></ul>
</div>
//JS
$('#p2').pagination({totalData:100, showData:5, coping:true})

效果

回调函数API

  • 插件提供一个配置回调和两个实例方法
  • 实例方法在初始化时执行，配置回调在点击页码时触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//HTML
<div class="nav-box">
<ul class="pagination" id="p3"></ul>
</div>
//HTML
<div class="nav-box">
<ul class="pagination" id="p3"></ul>
</div>
//JS
$('#p3').pagination({
totalData:100, 
showData:5, 
coping:true,
callback:function(i){ $('#logBox').append('<p>当前页码为：'+i+'</p>');}
}, function(api){
	$('#logBox').append('<p>*当前页码为：'+api.getCurrent()+'</p>');
	$('#logBox').append('<p>*当前总页数：'+api.getTotalPage()+'</p>');
})

效果

CodePen 示例

See the Pen pagination分页示例 by LT (@togglelt) on CodePen.

分享到