SSM-layui分页实例

好的，这是一个基于SSM框架和layui前端框架实现的分页实例：

首先，在Maven中引入相关依赖：

<!-- Spring -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.2.5.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>5.2.5.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-tx</artifactId>
    <version>5.2.5.RELEASE</version>
</dependency>

<!-- MyBatis -->
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis</artifactId>
    <version>3.5.4</version>
</dependency>
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis-spring</artifactId>
    <version>2.0.4</version>
</dependency>

<!-- C3P0 -->
<dependency>
    <groupId>c3p0</groupId>
    <artifactId>c3p0</artifactId>
    <version>0.9.5.5</version>
</dependency>

<!-- layui -->
<dependency>
    <groupId>com.layui</groupId>
    <artifactId>layui</artifactId>
    <version>2.5.6</version>
</dependency>

接着，创建一个实体类`User`，对应数据库中的`user`表：

public class User {
    private Integer id;
    private String name;
    private Integer age;
    //省略getter/setter方法
}

然后，创建DAO层接口`UserMapper`，以及对应的XML文件`UserMapper.xml`，实现分页查询：

public interface UserMapper {
    List<User> getUserList(@Param("start") Integer start,
                           @Param("pageSize") Integer pageSize);
    Integer getUserCount();
}

<select id="getUserList" resultType="User">
    select * from user
    limit #{start},#{pageSize}
</select>

<select id="getUserCount" resultType="Integer">
    select count(*) from user
</select>

再创建Service层接口`UserService`及其实现类`UserServiceImpl`，调用DAO层方法实现业务逻辑：

public interface UserService {
    PageInfo<User> getUserList(Integer pageNum, Integer pageSize);
}

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public PageInfo<User> getUserList(Integer pageNum, Integer pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<User> userList = userMapper.getUserList((pageNum - 1) * pageSize, pageSize);
        PageInfo<User> pageInfo = new PageInfo<>(userList);
        int totalCount = userMapper.getUserCount();
        pageInfo.setTotal(totalCount);
        return pageInfo;
    }
}

最后，创建Controller类`UserController`，处理前端请求并返回分页数据：

@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/user/list")
    @ResponseBody
    public TableResult<User> getUserList(@RequestParam(value = "page", defaultValue = "1") Integer pageNum,
                                         @RequestParam(value = "limit", defaultValue = "10") Integer pageSize) {
        PageInfo<User> pageInfo = userService.getUserList(pageNum, pageSize);
        TableResult<User> result = new TableResult<>();
        result.setCode(0);
        result.setMsg("");
        result.setCount(pageInfo.getTotal());
        result.setData(pageInfo.getList());
        return result;
    }
}

其中，`TableResult`是一个通用的分页返回结果类：

public class TableResult<T> {
    private Integer code;
    private String msg;
    private Long count;
    private List<T> data;
    //省略getter/setter方法
}

最后，在前端页面中引入layui的分页组件：

<table id="userTable" lay-filter="userTable"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        table.render({
            elem: '#userTable',
            url: '/user/list',
            method: 'get',
            page: true,
            cols: [[
                {field: 'id', title: 'ID', width: 70},
                {field: 'name', title: '姓名', width: 120},
                {field: 'age', title: '年龄', width: 70},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
        });
    });
</script>

这样，一个基于SSM和layui的分页实例就完成了。