页面的head部分，简单设置好页面的分页样式，带如下：

* {
	padding: 0;
	margin: 0;
}
/*
  * 外面盒子样式---自己定义
  */

.page_div {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 15px;
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
	color: #666666;
	margin-right: 10px;
	padding-left: 20px;
	box-sizing: border-box;
}
/*
 * 页数按钮样式
 */
.page_div a {
	min-width: 30px;
	height: 28px;
	border: 1px solid #dce0e0!important;
	text-align: center;
	margin: 0 4px;
	cursor: pointer;
	line-height: 28px;
	color: #666666;
	font-size: 13px;
	display: inline-block;
}
#firstPage,
#lastPage {
	width: 50px;
	color: #0073A9;
	border: 1px solid #0073A9!important;
}
#prePage,
#nextPage {
	width: 70px;
	color: #0073A9;
	border: 1px solid #0073A9!important;
}
.page_div .current {
	background-color: #0073A9;
	border-color: #0073A9;
	color: #FFFFFF;
}
.totalPages {
	margin: 0 10px;
}
.totalPages span,
.totalSize span {
	color: #0073A9;
	margin: 0 5px;
}

页面的body部分，需设置好分页显示的div容器，代码如下：

<div id="page" class="page_div"></div>

页面的底部，需引入jQuery库和分页插件，并设置好分页的参数，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script type="text/javascript">
//分页
$("#page").paging({
	totalPage: 10,
	totalSize: 300,
	callback: function(num) {
		alert("第 "+ num +" 页");
	}
})
</script>