JavaWeb若依分页插件使用

后端只需要在你本身的contoller调用service取得数据那条命令前后加上2行代码，就可以使用mybatis的分页插件。

language-java

@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

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

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
• isAsc
  orderby由后两个字段组成。所以在你前端传到后端的数据中，添加这4个字段和值即可实现分页效果和排序效果。

2. 前端示例

language-html

<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

@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);只需按照原来的逻辑写就行，不需要考虑分页或者排序。