页面的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>