基於bootstrap動態分頁

bootstrap本身的分頁有分頁組件 但是卻是靜態的,無法滿足要求,分頁必須根據當前的總頁數來展示

使用插件bootstrap-paginator

github下載地址 https://github.com/lyonlai/bootstrap-paginator.git

下載下來后解壓,打開發現是一堆文件,不要急,有用的就幾個:

1. src目錄的bootstrap-paginator.js 拷貝到自己的項目里面去
2. 打開documentation里面的index.html 這個是說明文檔, 里面有很多例子 照着來就行了

開始需要引入依賴文件

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="/js/bootstrap-paginator.min.js"></script> <div id="example"></div> <script type='text/javascript'> var options = { currentPage: 3, totalPages: 10 } $('#example').bootstrapPaginator(options); </script>

下面放一個我自己用過的 其中總頁數 總套數 當前頁數都是從后端php傳過來的

<link href="/themes/lib/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="/themes/lib/jquery/jquery-3.3.1.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/themes/lib/bootstrap-3.3.7/js/bootstrap.min.js"></script> <div style="text-align: right"> <ul id="pageLimit"></ul> </div> <script> //分頁 $('#pageLimit').bootstrapPaginator({ currentPage: <?php echo $data['page']; ?>,//當前的請求頁面。 totalPages: <?php echo $data['total_rows']; ?>,//一共多少頁。 size:"normal",//應該是頁眉的大小。 bootstrapMajorVersion: 3,//bootstrap的版本要求。 alignment:"right", totalPages:<?php echo $data['total_page']; ?>, useBootstrapTooltip:false, numberOfPages:5,//一頁列出多少數據。 tooltipTitles: function (type, page, current) { switch (type) { case "first": return ""; case "prev": return ""; case "next": return ""; case "last": return ""; case "page": return ''; } }, itemTexts: function (type, page, current) {//如下的代碼是將頁眉顯示的中文顯示我們自定義的中文。 switch (type) { case "first": return "首頁"; case "prev": return "上一頁"; case "next": return "下一頁"; case "last": return "末頁"; case "page": return page; } }, pageUrl: function(type, page, current){ return "/admin/articles/index?page="+page; } }); </script>