MyBatis-Plus结合Layui实现分页方法

下面我将详细讲解“MyBatis-Plus结合Layui实现分页方法”的完整攻略，步骤如下：

1. 添加MyBatis-Plus和Layui相关依赖

在pom.xml文件中，添加以下两个依赖：

<!-- 添加MyBatis-Plus依赖 -->
<dependency>
  <groupId>com.baomidou</groupId>
  <artifactId>mybatis-plus-boot-starter</artifactId>
  <version>3.4.0</version>
</dependency>

<!-- 添加Layui依赖 -->
<dependency>
  <groupId>com.gitee.hjf</groupId>
  <artifactId>layui-spring-boot</artifactId>
  <version>2.6.6-3</version>
</dependency>

2. 配置MyBatis-Plus分页插件

在MyBatis的配置文件中，添加如下配置，配置MyBatis-Plus的分页插件：

<!-- 在MyBatis配置文件中添加如下配置 -->
<plugins>
  <!-- MyBatis-Plus分页插件 -->
  <plugin interceptor="com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor">
    <!-- 数据库方言 -->
    <property name="dialectType" value="mysql"/>
  </plugin>
</plugins>

3. 在Controller中添加分页方法

在Controller中，添加分页方法，代码如下：

@GetMapping("/list")
public AjaxPageResult<T> list(@RequestParam(required = false, defaultValue = "1") Integer page,
                              @RequestParam(required = false, defaultValue = "10") Integer limit,
                              T params) {
    // 创建分页对象
    Page<T> pageInfo = new Page<>(page, limit);
    // 获取分页数据
    IPage<T> pageData = service.page(pageInfo, Wrappers.query(params));
    // 封装前端需要的分页对象
    return AjaxPageResult.success(pageData.getTotal(), pageData.getRecords());
}

在上述代码中，第一个参数为当前页数，第二个参数为每页显示的记录数，第三个参数为查询参数，具体可根据实际情况进行修改。该方法利用MyBatis-Plus提供的service.page()方法，实现分页查询，并将查询结果封装成前端需要的分页对象。

4.在前端页面中使用Layui实现分页

最后，在前端页面中引入Layui的分页组件，如下所示：

<!-- 在html页面中引入Layui组件库 -->
<head>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>

<!-- 在body中添加分页代码 -->
<div id="page"></div>

<!-- 引入Layui JS脚本 -->
<script th:src="@{/layui/layui.js}"></script>

<!-- 在JS代码中初始化分页 -->
<script>
  // Layui分页组件的参数配置
  var pageConfig = {
    elem: '#page',
    count: total,
    limit: 10,
    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
    curr: location.hash.replace('#!page=', ''),
    jump: function (obj, first) {
      if (!first) {
        location.href = '/list?page=' + obj.curr + '&limit=' + obj.limit;
      }
    }
  };

  // 初始化分页组件
  layui.use('laypage', function () {
    layui.laypage.render(pageConfig);
  });
</script>

在上述代码中，我们利用Layui提供的分页组件，将后端返回的分页数据展示到前端页面上。其中，total变量为后端返回的总记录数，可根据实际情况进行修改。

至此，我们就完成了“MyBatis-Plus结合Layui实现分页方法”的完整攻略。

下面是一个示例：

示例1：查询用户列表并分页展示

Controller代码：

@GetMapping("/user/list")
public AjaxPageResult<User> userList(@RequestParam(required = false, defaultValue = "1") Integer page,
                                     @RequestParam(required = false, defaultValue = "10") Integer limit,
                                     User params) {
    Page<User> pageInfo = new Page<>(page, limit);
    IPage<User> pageData = userService.page(pageInfo, Wrappers.query(params));
    return AjaxPageResult.success(pageData.getTotal(), pageData.getRecords());
}

前端JS代码：

<script>
  var pageConfig = {
    elem: '#userPage',
    count: ${total},
    limit: 10,
    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
    curr: location.hash.replace('#!page=', ''),
    jump: function (obj, first) {
      if (!first) {
        location.href = '/user/list?page=' + obj.curr + '&limit=' + obj.limit;
      }
    }
  };
  layui.use(['laypage', 'layer'], function () {
    layui.laypage.render(pageConfig);
  });
</script>

示例2：查询订单列表并分页展示