ssm+easyUI整合pageHelper插件

pagehelper是mybatis的一个分页插件，它基本上支持市面上所有主流与常用的数据库。
在ssm环境配置完成以后(在我的博客中有环境配置）
一、创建数据库

CREATE TABLE `user` (
  `id` int(50) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  `tel` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;

在user表中插入数据(尽量多点方便分页的时候显示)
二、在pom文件中添加依赖

<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
    </dependency>

三、引入easyui把相应的js，css文件放到webapp中
把官网的安装包下载下来，将所需的js,css等文件copy下来，放到static中即可

1. 把静态文件放到static中，其中plugins存放的是easyui的css，img，js等文件，common中存放的是一些公共片段代码，js存放的是页面的JavaScript文件。
   
2. 在index文件中引入相应的js和css

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/easyui/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/easyui/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/easyui/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>

3. 在index中添加easyui的数据表格（我采用的是js的方式）

<div id="dg"></div>

4.在index.js中编写数据表格

/*数据表格*/
$(function () {
    $("#dg").datagrid({
        url:"/userList",
        columns:[[
            {field:'name',title:'姓名',width:100,align:'center'},
            {field:'password',title:'密码',width:100,align:'center'},
            {field:'tel',title:'电话',width:100,align:'center'}
        ]],
        fitColumns:true,//字段兼容
        rownumbers:true,//数字框
        pagination:true,//分页框
        pageList:[3,5,10]
    });
});

运行项目的时候，发送请求userList，点开页面中的检查，找到netWork会发现easyui会发送两个字段

其中page为当前页数，rows为当前行数我们把当前的字段封装到QueryVo中传到后台，然后把数据封装到PageList中，返回到前台。
四、后台代码

1. 创建User，QueryVo，PageList的实体类（不要忘记get，set方法）

User
package com.pojo;

public class User {
    private Integer id;
    private String name;
    private String password;
    private String tel;
}

QueryVo
package com.pojo;

public class QueryVo {
    private int page;//当前页数
    private int rows;//当前行数
}

PageList
package com.pojo;

import java.util.ArrayList;
import java.util.List;

public class PageList {

    private Long Total;//数据总数

    private List<?> rows = new ArrayList<>();//每一行的数据
}

2. UserController

package com.controller;

import com.pojo.PageList;
import com.pojo.QueryVo;
import com.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/userList")
    @ResponseBody
    public PageList userList(QueryVo vo){
       PageList pageList =  userService.getUserList(vo);
       return pageList;
    }
}

3. UserService

package com.service;

import com.pojo.PageList;
import com.pojo.QueryVo;

public interface UserService {
    PageList getUserList(QueryVo vo);
}

4. UserServiceImpl

package com.service.impl;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.mapper.UserMapper;
import com.pojo.PageList;
import com.pojo.QueryVo;
import com.pojo.User;
import com.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;
    @Override
    public PageList getUserList(QueryVo vo) {
        Page<Object> page = PageHelper.startPage(vo.getPage(), vo.getRows());
        List<User> list = userMapper.getUserList(vo);
        /*封装成pageList*/
        PageList pageList = new PageList();
        /*获取总数*/
        pageList.setTotal(page.getTotal());
        /*获取当前行的数据*/
        pageList.setRows(list);
        return pageList;
    }
}

5. UserMapper

package com.mapper;

import com.pojo.QueryVo;
import com.pojo.User;

import java.util.List;

public interface UserMapper {
    List<User> getUserList(QueryVo vo);
}

6.UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mapper.UserMapper">


    <select id="getUserList" resultType="com.pojo.User">
        select * from user
    </select>
</mapper>

提醒一下：最好不要写*，将数据库中的字段写出来会更好（我偷懒了）
五、页面展示

更改每页查询数据

有什么问题欢迎在下面留言，我会尽快回复。