基于Bootstrap的分页插件

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

默认配置参数

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

//HTML
<div class="nav-box">
	<ul class="pagination" id="p1"></ul>
</div>
//JS
$('#p1').pagination({totalData:80, showData:5})

效果

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

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

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

效果

回调函数API

• 插件提供一个配置回调和两个实例方法
• 实例方法在初始化时执行，配置回调在点击页码时触发

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