導(dǎo)入一些css、js
<link href="/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的導(dǎo)入順序，jquery優(yōu)先導(dǎo)入并且版本要2.x。中文亂碼：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
其中：bootstrap-paginator.js下載的地址：https://github.com/lyonlai/bootstrap-paginator 在GitHub上進(jìn)行下載。
html代碼：
<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
<script>
$('#pageLimit').bootstrapPaginator({
currentPage: 1,//當(dāng)前頁。
totalPages: 20,//總頁數(shù)。
size:"normal",//應(yīng)該是頁眉的大小。
bootstrapMajorVersion: 3,//bootstrap的版本要求。
alignment:"right",
numberOfPages:5,//顯示的頁數(shù)
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) {//給每個(gè)頁眉綁定一個(gè)事件，其實(shí)就是ajax請(qǐng)求，其中page變量為當(dāng)前點(diǎn)擊的頁上的數(shù)字。
$.ajax({
url:'',
type:'',
data:{},
dataType:'JSON',
success:function (callback) {
}
})
}
});
</script>
