mybatis-plus插件实现分页
1、编写Mapper层
public interface AdminMapper extends BaseMapper<Admin> {
}
2、编写Service层
@Service
public class AdminService{
@Autowired
private AdminMapper adminMapper;
public Page<Admin> findPage(int page,int size){
Page selectPage = adminMapper.selectPage(new Page(page,size),null);
return selectPage;
}
}
3、编写Controller层
在编写Controller层之前需要在启动类扫描mapper接口,注册mybatis-plus
分页插件
@SpringBootApplication
@MapperScan("com.zhang.travel.mapper")
@ServletComponentScan
public class TravelApplication {
public static void main(String[] args) {
SpringApplication.run(TravelApplication.class, args);
}
//注册分页插件
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}
controler层代码
@Controller
@RequstMapping("/backstage/admin")
public class AdminController{
@Autowired
private AdminService adminService;
@RequestMapping("/all")
public ModelAndView all(@RequstParam (defaultValue="1")int page,@RequestMapping (defaultValue="10")int size){
Page<Admin> adminPage = adminService.findPage(page,size);
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("adminPage",adminPage);
modelAndView.setViewName("/backstage/admin_all");
return modelAndView;
}
}
4、前端显示
<section class="content">
<!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<a th:href="@{/backstage/admin_add}">
<button type="button" class="btn btn-default" title="新建"><i
class="fa fa-file-o"></i> 新建
</button>
</a>
</div>
</div>
</div>
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px;">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th>用户名</th>
<th>邮箱</th>
<th>联系电话</th>
<th>状态</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr th:each="admin:${adminPage.records}">
<td><input name="ids" type="checkbox"></td>
<td th:text="${admin.username}"></td>
<td th:text="${admin.email}"></td>
<td th:text="${admin.phoneNum}"></td>
<td th:text="${admin.status}"></td>
<td class="text-center">
<a th:href="@{/backstage/admin/desc(aid=${admin.aid})}"
class="btn bg-olive btn-xs">详情</a>
<a th:href="@{/backstage/admin/edit(aid=${admin.aid})}"
class="btn bg-olive btn-xs">修改</a>
<a th:href="@{/backstage/admin/findRole(aid=${admin.aid})}" class="btn bg-olive btn-xs">分配角色</a>
<a th:href="@{/backstage/admin/updateStatus(aid=${admin.aid})}"
class="btn bg-olive btn-xs">开启/禁用</a>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共<span th:text="${adminPage.pages}"></span>页,
共<span th:text="${adminPage.total}"></span>条数据。
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination"></ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
引入分页插件
<script th:inline="javascript">
$(function () {
var currentPage = [[${adminPage.current}]];
var pages = [[${adminPage.pages}]];
$(".pagination").bootstrapPaginator({
bootstrapMajorVersion: 3,
currentPage: currentPage, // 当前页
totalPages: pages, // 总页数
numberOfPages: 5, // 最多显示多少页
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) { // 点击页码执行的方法
location.href = "/backstage/admin/all?page=" + page;
}
});
})
</script>