首先对js和css的引用
<link rel=”stylesheet” href=”reference/bootstrap/css/bootstrap.min.css”/>
<script type=”text/javascript” src=”reference/jquery-2.0.3.min.js”></script>
<script type=”text/javascript” src=”reference/bootstrap-paginator.js”></script>
初始化分页控件
<div id=”page”></div>
<script type=”text/javascript”>
$(function(){
var options={
bootstrapMajorVersion:1, //版本
currentPage:1, //当前页数
numberOfPages:5, //最多显示Page页
totalPages:10, //所有数据可以显示的页数
onPageClicked:function(e,originalEvent,type,page){
}
}
$(“#page”).bootstrapPaginator(options);
})
</script>
如果bootstrapMajorVersion:1 时，则上面的分页标签用 div
如果bootstrapMajorVersion:3 时，则上面的分页标签用 ul
其中：currentPage 是当前你所在的页数 numberOfPages 是分页按钮可见的最多数 totalPages 是所有数据能分的页数（这些 options（选项）是在初始化分页控件的时候使用的。）
在onPageClicked 事件中 page 参数标识你点击页数时所在的页数。
完整代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css" rel="external nofollow" />
<script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="reference/bootstrap-paginator.js"></script>
</head>
<body>
<div id="page"></div> <script type="text/javascript">
$(function(){
var options={
bootstrapMajorVersion:1, //版本
currentPage:1, //当前页数
numberOfPages:5, //最多显示Page页
totalPages:10, //所有数据可以显示的页数
onPageClicked:function(e,originalEvent,type,page){
console.log("e");
console.log(e);
console.log("originalEvent");
console.log(originalEvent);
console.log("type");
console.log(type);
console.log("page");
console.log(page);
}
}
$("#page").bootstrapPaginator(options);
})
</script>
</body>
</html>
