bootstrap 分頁詳解
阿新 • • 發佈：2019-02-20
1.匯入js,css樣式檔案，缺一不可，順序不可亂
<link rel="stylesheet" href="css/qunit-1.11.0.css"> <link rel="stylesheet" href="css/bootstrapv3.css"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-paginator.js"></script> <script src="js/qunit-1.11.0.js"></script>
2.程式碼，options絕大數可選配置
<body> <div id="alert-content"></div> <div id="alert-content"></div> <div> <ul id='bp-3-element-test'></ul> </div> <script> $(function(){ var element = $('#bp-3-element-test'); var options = { bootstrapMajorVersion:3, currentPage: 3,//當前頁 numberOfPages: 5,//每次展示多少頁 totalPages:11,//總頁數 size:'small',//大小 alignment:'right',//位置 pageUrl: function(type, page, current){//訪問連線 return "#"+page; }, itemTexts: function (type, page, current) { //樣式文字設定 switch (type) { case "first": return "首頁"; case "prev": return "前一頁"; case "next": return "下一頁"; case "last": return "最後"; case "page": return ""+page; } }, shouldShowPage:function(type, page, current){//控制哪些顯示，哪些隱藏 switch(type) { case "first": case "last": return false; //首頁最後一頁隱藏 default: return true; //其他顯示 } }, tooltipTitles: function (type, page, current) { //提示框，當滑鼠放上去給提示 switch (type) { case "first": return "提示首頁"; case "prev": return "提示前頁"; case "next": return "Tooltip for next page"; case "last": return "Tooltip for last page"; } }, useBootstrapTooltip:true, onPageClicked: function(e,originalEvent,type,page){ $('#alert-content').text("點選頁數時，觸發該函式, type: "+type+" page: "+page); }, onPageChanged: function(e,oldPage,newPage){ $('#alert-content').text("當頁面改變時，觸發該函式, old: "+oldPage+" new: "+newPage); } } element.bootstrapPaginator(options); }); </script> </body> </html>
效果圖
3.官方文件下載地址，包含英文文件，和所有檔案
https://github.com/lyonlai/bootstrap-paginator