后端只需要在你本身的contoller
调用service
取得数据那条命令前后加上2行代码,就可以使用mybatis
的分页插件。
language-java 1 2 3 4 5 6 7 8 @GetMapping("move/search") public AjaxResult moveSearch(StockMoveSearchDTO dto){ startPage();//第一句 List<BztStockMoveHeadExp> list = stockMgntService.moveSearch(dto);//这是自己本身的逻辑代码 TableDataInfo dataTable = getDataTable(list);//第二句 return success(dataTable); }
整体看起来,startPage
像是加载了某些配置,然后基于这些配置getDataTable
对你本来的逻辑进行了修改,实现了分页排序效果。
1.原理解析 ctrl左键点击startPage()
,两次追溯源码实现,可以看到以下代码
language-java 1 2 3 4 5 6 7 8 9 10 public static void startPage() { PageDomain pageDomain = TableSupport.buildPageRequest(); Integer pageNum = pageDomain.getPageNum(); Integer pageSize = pageDomain.getPageSize(); String orderBy = SqlUtil.escapeOrderBySql(pageDomain.getOrderBy()); Boolean reasonable = pageDomain.getReasonable(); PageHelper.startPage(pageNum, pageSize, orderBy).setReasonable(reasonable); }
PageHelper.startPage(pageNum, pageSize, orderBy)
是myabtis
的分页插件,
第一个参数是当前页码
第二个参数是每一页数量
第三个参数是排序信息,包括排序列和排序顺序
PageHelper
会拦截你的sql代码然后加上类似limit ,order by等语句实现所谓的分页排序查询,数据截取是在sql中完成的,很快,所以你不必担心这个插件是不是在数据选完之后再分割导致性能问题。
那么问题来了,pageNum
, pageSize
, orderBy
这三个参数从哪里来?毋庸置疑,肯定是从前端来,但是却不需要你写在dto中,因为若依会从你传到后端的数据中截取这三个参数。ctrl左键点击buildPageRequest()
,追溯源码实现,你会看到以下代码。
language-java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 public static PageDomain getPageDomain() { PageDomain pageDomain = new PageDomain(); pageDomain.setPageNum(Convert.toInt(ServletUtils.getParameter(PAGE_NUM), 1)); pageDomain.setPageSize(Convert.toInt(ServletUtils.getParameter(PAGE_SIZE), 10)); pageDomain.setOrderByColumn(ServletUtils.getParameter(ORDER_BY_COLUMN)); pageDomain.setIsAsc(ServletUtils.getParameter(IS_ASC)); pageDomain.setReasonable(ServletUtils.getParameterToBool(REASONABLE)); return pageDomain; } public static PageDomain buildPageRequest() { return getPageDomain(); }
大概意思就是会从你传到后端的数据从截取以下字段
pageNum
pageSize
orderByColumn
isAscorderby
由后两个字段组成。所以在你前端传到后端的数据中,添加这4个字段和值即可实现分页效果和排序效果。
2. 前端示例 language-html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <template> <el-table :data="tableList" @sort-change="handleSortChange"> <el-table-column prop="formCreateTime" label="录入日期" sortable="custom" :sort-orders="['ascending', 'descending']" > <template #default="scope"> { { new Date(scope.row.formCreateTime).toLocaleDateString() }} </template> </el-table-column> </template> <script setup> const queryParams = reactive({ pageNum: undefined, pageSize: undefined, orderByColumn: 'formCreateTime', isAsc: 'descending', }) const tableList = ref([]) const handleSortChange=(column)=>{ queryParams.orderByColumn = column.prop; queryParams.isAsc = column.order; onSubmitQuiet(); } const onSubmitQuiet = () => { queryParams.pageNum = 1; queryParams.pageSize = 10; moveSearch(queryParams).then(rp => { // console.log(rp) tableList.value = rp.data.rows; pageTotal.value = rp.data.total; }) } </script>
这是一个简单的表格,只包含一列,当点击这一列表头时,触发handleSortChange
,更新orderByColumn
和isAsc
然后重新从后端查询一遍,注意用Get
方式。pageNum
和pageSize
可以通过el-pagination
组件更新,这里就不写了。后端返回值包含rows
表示具体数据是一个list,total
表示数据量。需要注意的时传给后端的orderByColumn
所代表的字符串(这里是formCreateTime
)应该和后端对应domain
对应的变量名一致。
3. 后端示例 language-java 1 2 3 4 5 6 7 8 @GetMapping("move/search") public AjaxResult moveSearch(StockMoveSearchDTO dto){ startPage(); List<BztStockMoveHeadExp> list = stockMgntService.moveSearch(dto); TableDataInfo dataTable = getDataTable(list); return success(dataTable); }
其中List<BztStockMoveHeadExp> list = stockMgntService.moveSearch(dto);
只需按照原来的逻辑写就行,不需要考虑分页或者排序。