导入一些css、js
<link href="//www.greatytc.com/static/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/js/jquery-2.1.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-paginator.js"></script>
注意:js的导入顺序,jquery优先导入并且版本要2.x。中文乱码:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
其中:bootstrap-paginator.js下载的地址:https://github.com/lyonlai/bootstrap-paginator 在GitHub上进行下载。
html代码:
<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
<script>
$('#pageLimit').bootstrapPaginator({
currentPage: 1,//当前页。
totalPages: 20,//总页数。
size:"normal",//应该是页眉的大小。
bootstrapMajorVersion: 3,//bootstrap的版本要求。
alignment:"right",
numberOfPages:5,//显示的页数
itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},
onPageClicked: function (event, originalEvent, type, page) {//给每个页眉绑定一个事件,其实就是ajax请求,其中page变量为当前点击的页上的数字。
$.ajax({
url:'',
type:'',
data:{},
dataType:'JSON',
success:function (callback) {
}
})
}
});
</script>