Mybatis分頁Pagehelper以及前端外掛結合使用完整版
阿新 • • 發佈:2018-11-07
前端效果圖:
後臺部分
maven依賴:
基於mybatis
<dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-autoconfigure</artifactId> <version>1.2.3</version> </dependency> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.3</version> </dependency>
service程式碼:
Role為角色實體類
PageInfo<Role> selectRoleList(Integer pageNum, Integer pageSize,Role role);
``
serviceimpl實現類:
注意:下面的方法不寫在controller裡面
@Override public PageInfo<Role> selectRoleList(Integer pageNum, Integer pageSize, Role role) { PageHelper.startPage(pageNum, pageSize); List<Role> list = roleMapper.selectRoleListByName(role); PageInfo<Role> pageInfo = new PageInfo<>(list); return pageInfo; }
controller:
@GetMapping("index") public String adminIndex(Role record,Model model, @RequestParam(required=true,value="pageNum",defaultValue="1") Integer pageNum, @RequestParam(required=true,value="pageSize",defaultValue="15") Integer pageSize ){ PageInfo<Role> pageInfo = roleService.selectRoleList(pageNum, pageSize, record); model.addAttribute("rolename", record.getRolename()); model.addAttribute("pageInfo", pageInfo); return "admin/role/setup"; }
前端部分:
在後端 引數部分defaultValue="15"預設每頁顯示15條,若沒有15條資料不顯示分頁;根據情況自己修改測試。
需要的js,css:
jquery.pagination.css
jquery.pagination.min.js
外掛下載:
https://download.csdn.net/download/qq_22860341/10694937
或者去網上自行尋找資源下載
示例:
<link rel="stylesheet" th:href="@{/api/css/jquery.pagination.css}">
<script th:src="@{/api/js/jquery.pagination.min.js}"></script>
html程式碼:
<table class="table table-striped" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><input type="checkbox" name="" id="checkall" value="" /></td>
<td>序號</td>
<td>角色</td>
<td>建立時間</td>
</tr>
<tr th:each="a,aStat:${pageInfo.list}">
<td><input type="checkbox" name="childcheck" th:id="${a.id}" th:value="${a.id}" /></td>
<td th:text="${aStat.count}">1</td>
<td th:text="${a.rolename}">超級管理員</td>
<td th:text="${#strings.substring(a.createtime,0,19)}">2018.05.07 15:30</td>
</tr>
</table>
<div class="box">
<div id="pagination" class="page center">
</div>
最後這個分頁程式碼一定加:
<div class="box">
<div id="pagination" class="page center">
</div>
js程式碼:
<script>
var pageNum = [[${pageInfo.pageNum}]];
var pages = [[${pageInfo.pages}]];
var pageSize = [[${pageInfo.pageSize}]];
//
$("#pagination").pagination({
currentPage: pageNum,
totalPage: pages,
isShow: true,
count: pageSize,
homePageText: "首頁",
endPageText: "尾頁",
prevPageText: "上一頁",
nextPageText: "下一頁",
});
//點選頁數
$('.ui-pagination-page-item').on('click', function () {
var pageNum = $(this).attr('data-current');
var zhanghao = $("#searchrole").val(); //這是搜尋時的引數,根據實際情況加或者不要
window.location.href = encodeURI('/sys/role/index?pageNum=' + pageNum+'&rolename='+zhanghao);
});
</script>