MyBatisplus分頁插件
分頁插件
一，后台分頁配置
MyBatis Plus自帶分頁插件（即BaseMapper接口中的selectPage()方法），只要簡單的配置即可實現分頁功能，具體步驟如下：
1.1 配置分頁插件
新創一個配置類，在配置類里面配置分頁插件
@Configuration
@MapperScan("com.example.mapper") //掃描dao層@Mapper，如果主啟動類中已有，這里可省略
public class MpConfig {
/**
* 分頁插件（官網最新）
*/
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.H2));
return interceptor;
}
}
1.2編寫分頁代碼
分頁的所有數據都在userPage對象中封裝着，所以可以調用userPage對象的一系列方法對分頁數據進行操作。
/**
* 分頁查詢
* new Page(current,size):
* current:當前頁
* size:每頁記錄數
*/
@Test
public void testSelectPage() {
Page<User> page = new Page(1, 3);
Page<User> userPage = userMapper.selectPage(page, null);
// 分頁的所有數據都在userPage對象中封裝着
// 獲取總頁數
long pages = userPage.getPages();
// 獲取當前頁
long current = userPage.getCurrent();
// 獲取當前頁數據集合
List<User> records = userPage.getRecords();
// 獲取總記錄數
long total = userPage.getTotal();
// 當前頁是否有下一頁
boolean hasNext = userPage.hasNext();
// 當前頁是否有上一頁
boolean hasPrevious = userPage.hasPrevious();
System.out.println("總頁數pages=" + pages);
System.out.println("當前頁current=" + current);
System.out.println("當前頁數據集合records=" + records);
System.out.println("總記錄數total=" + total);
System.out.println("是否有下一頁hasNext=" + hasNext);
System.out.println("是否有上一頁hasPrevious=" + hasPrevious);
}
1.3測試
當前數據庫的user表中有8條記錄，設置當前頁數為1，每頁記錄數為3。
如圖：
分頁查詢的結果 當前數據庫中有8條記錄，執行后的代碼如下：
1.4Controller控制器代碼
@Autowired
private UserService userService;
@RequestMapping("/list.html")
public String userList(
@RequestParam(value = "keyword", defaultValue = "") String keyword,
@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
@RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,
Model model){
QueryWrapper<User> queryWrapper = new QueryWrapper<>();//條件構造器
queryWrapper.like("name",keyword);//模糊查詢Like
Page<User> page = new Page(pageNum, pageSize);//分頁插件
Page<User> page1 = userService.page(page,queryWrapper);//查詢數據
model.addAttribute("page",page1);//將Page分頁數據放入request域，命名為page傳到前台
return "user_list";
}
二，前台分頁配置
這里前台用的是jq分頁插件'jquery.pagination.js'和'pagination.css',所以記錄的前台分頁配置
是關於jq分頁插件的代碼
2.1寫一個id名為Pagination,class名為pagination的ul
//這里的ul是給分頁導航條做准備，也就是上一頁下一頁，選擇數字跳到該頁
<ul class="pagination" id="Pagination"></ul>
下面的表格的循環，也就是需要分頁的數據庫里面的數據
<table class="table table-striped">
<thead>
<tr>
<th>論文主題</th>
<th>作者</th>
<th>論文類型</th>
<th>發表時間</th>
<th>修改時間</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>-->//這里目前可以忽略，本來是想做：'如果沒有查詢到需要分頁的數據，就顯示未找到您所需要的數據'，
時間關系就沒做，這個很簡單，用thymeleaf判斷一下就好了
<!-- <td colspan="6" th:if="${not #strings.isEmpty(getTotal)}">未找到您所需的數據</td>-->
<!-- </tr>-->
<tr th:each="plist:${page.records}">
<td th:text="${plist.name}"></td>
<td th:text="${plist.age}"></td>
<td th:text="${plist.email}"></td>
<td th:text="${plist.creationdate}"></td>
<td th:text="${plist.modifydate}"></td>
<td>
<a th:href="@{/user/edit.html(id=${plist.id},pageNum=${page.current},keyword=${param.keyword})}"
class="btn btn-primary btn-xs"><i
class=" glyphicon glyphicon-pencil"></i></a>
<a th:href="@{/user/del.html(id=${plist.id},pageNum=${page.current},keyword=${param.keyword})}"
class="btn btn-danger btn-xs" aria-label="Close"><span aria-hidden="true">×</span></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" align="center">
<ul class="pagination" id="Pagination"></ul>
</td>
</tr>
</tfoot>
</table>
2.2jq代碼
<script th:inline="javascript">//這里用的是thymeleaf所以script標簽對要按照thymeleaf的來
$(function () {
var total = [[${page.total}]];//total為總數，后台傳過來的page分頁數據里面的總數
console.log("total:"+total)//前台控制台打印總數
console.log("pageNum:"+[[${page.current-1}]])//前台控制台打印當前頁
console.log("pageSize:"+[[${page.size}]])//前台控制台打印每頁記錄數
//創建分頁
var pageData = {
num_edge_entries: 1,//邊緣頁數
num_display_entries: 4, //主體頁數
callback: pageselectCallback,
current_page: [[${page.current-1}]],//當前頁
items_per_page: [[${page.size}]], //每頁顯示的條數
prev_text: "上一頁",
next_text: "下一頁"
}
//這里是拿到id為Pagination的dom對象，也就是之前的ul，放入總數total，和分頁需要的對象pageData，然后生成分頁條
$("#Pagination").pagination(total, pageData);
//分頁 這里點擊上一頁下一頁跳轉
function pageselectCallback(page_index, jq) {
//頁數起始位1
var pageNum2 = page_index + 1;
var keyWord = [[${param.keyword}]];
if (keyWord==null){//如果查詢的文本框為空，就不帶查詢的數據到后台，只需要當前頁傳入后台
//跳轉到分頁控制器
window.location.href = "/user/list.html?pageNum=" + pageNum2;
//阻止超鏈接的默認行為
return false;
}
//跳轉到分頁控制器 順便將當前頁和查詢的數據傳到后台
window.location.href = "/user/list.html?pageNum=" + pageNum2 + "&keyword=" + keyWord;
//阻止超鏈接的默認行為
return false;
}
})
</script>