简单易用的jQuery分页代码

一款简单易用的jQuery分页代码，演示页面里有3种样式可供选择，每种样式都可以自由修改，个人比较喜欢此类简洁风格的分页，喜欢的童鞋请收下吧。

分类：html/css > 按钮难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，引入一个插件的样式文件，接着引入jQuery库和分页插件，设置好页面元素的样式，代码如下：

<link type="text/css" rel="stylesheet" href="css/jquery.pagination.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pagination.min.js"></script>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
	background: #eee;
}

.box {
	width: 800px;
	margin: 100px auto 0;
	height: 34px;
}

.page {
	width: 600px;
}

.info {
	width: 200px;
	height: 34px;
	line-height: 34px;
}

.fl {
	float: left;
}
</style>

页面的body部分，多个div容器放入不同样式的分页内容，代码如下：

<div class="box">
	<div id="pagination1" class="page fl"></div>
	<div class="info fl">
		<p>当前页数：<span id="current1">1</span></p>
	</div>
</div>
<div class="box">
	<div id="pagination2" class="page fl"></div>
	<div class="info fl">
		<p>当前页数：<span id="current2">6</span></p>
	</div>
</div>
<div class="box">
	<div id="pagination3" class="page fl"></div>
	<div class="info fl">
		<p>当前页数：<span id="current3">8</span></p>
	</div>
</div>

页面的底部，启用分页插件，并设置好相关的参数，代码如下：

<script type="text/javascript">
$(function() {
	$("#pagination1").pagination({
		currentPage: 1,
		totalPage: 12,
		callback: function(current) {
			$("#current1").text(current)
		}
	});

	$("#pagination2").pagination({
		currentPage: 6,
		totalPage: 12,
		isShow: false,
		count: 6,
		prevPageText: "< 上一页",
		nextPageText: "下一页 >",
		callback: function(current) {
			$("#current2").text(current)
		}
	});

	$("#pagination3").pagination({
		currentPage: 8,
		totalPage: 16,
		isShow: true,
		count: 7,
		homePageText: "首页",
		endPageText: "尾页",
		prevPageText: "上一页",
		nextPageText: "下一页",
		callback: function(current) {
			$("#current3").text(current)
		}
	});
});
</script>