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下載的地址：
https://github.com/lyonlai/bootstrap-paginator 在GitHub上進行下載。 -
中文亂碼：<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)); }