mybatis plus的分頁外掛在前臺網站使用
阿新 • • 發佈:2018-11-02
-
首先匯入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>
ps:1.bootstrap-paginator.js下載的地址:
-
中文亂碼:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
- 頁面新增顯示用的div
<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
- js程式碼
$.ajax({ url: "#springUrl('/sys/newsItem/getNewsItemList')", type: "POST", success: function (data) { var d = JSON.parse(data); formatNewItemList(d); //對這一頁的資料的處理的js方法(自行編寫) var pageCount = d.total; //總頁數 var options = { currentPage: 1, //當前頁(初始化設定,所以是第一頁) totalPages: (pageCount%10) == 0?(pageCount/10):(pageCount/10)+1, //總頁數(10是定義的每頁顯示的數量) numberOfPages:10, //每頁顯示數量 bootstrapMajorVersion:3, //最低bootstrap適配版本 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){ //page代表你點的是第幾頁 /* 由於要給後臺的mybatis plus的分頁外掛,他在呼叫getPage()的時候會從request中取“_index”和“_size” 檢視mybatis的原始碼可以看到_index傳入的時候,會變成offset偏移量,所以(_index=點選的頁數 * 每頁定義多少個 - 1) _size就是你定義的每頁顯示多少個 */ var _index = parseInt(page)*10-1; $.ajax({ url: "#springUrl('/sys/newsItem/getNewsItemList')", data:{"_index":_index,"_size":10}, type: "POST", success: function (data) { var d = JSON.parse(data); console.log(d); formatNewItemList(d); //對這一頁的資料的處理的js方法(自行編寫) } }) } }; $('#page').bootstrapPaginator(options); } }); });
- controller
@ResponseBody @Permission("1005") @RequestMapping("/getNewsItemList") public String getNewsItemList() { Page<NewsItem> page = getPage(); return jsonPage(newsItemService.selectPage(page)); }