Java PageHelper分页(后端 com.github.pagehelper, 前端 jquery.bootpag)基本用法亲测

Shawn Jeon 2019-09-21 20:43:21

1655

分类专栏： Spring Boot Java JavaScript 文章标签： PageHelper java分页 Spring Boot分页 jquery.bootpag Spring分页

最后发布:2019-09-21 20:43:21首次发布:2019-09-21 20:10:29

本文链接：https://blog.csdn.net/qcl108/article/details/101116811

版权

Java PageHelper基本用法

1. Maven包 pom.xml
2. 环境 application.properties
3. 数据库 `test` 和数据表 `user`及相关测试数据
4. User.java(Entity)与 `user`数据表字段对应
5. DAO(Data Access Object)数据访问接口 UserDao.java和实现类 UserDaoImpl.java
6. UserMapper.xml
7. userList.html
8. 前端使用了 jquery.bootpag
9. UserController.java(入口)
- 页面浏览

1. Maven包 pom.xml

  <!-- 父级 pom.xml-->
  <properties>
    <spring-boot.version>1.5.17.RELEASE</spring-boot.version>
  </properties>
  
  <dependencyManagement>
    <dependencies>
      <!--Spring IO 控制依赖版本适配-->
      <dependency>
        <groupId>io.spring.platform</groupId>
        <artifactId>platform-bom</artifactId>
        <version>Brussels-SR14</version>
        <type>pom</type>
        <scope>import</scope>
      </dependency>
      <!--Spring Boot 控制依赖版本适配-->
      <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-dependencies</artifactId>
        <version>${spring-boot.version}</version>
        <type>pom</type>
        <scope>import</scope>
      </dependency>
      <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>1.3.2</version>
      </dependency>
      <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.2.9</version>
      </dependency>
      <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
        <version>1.9.22</version>
      </dependency>
    </dependencies>
  </dependencyManagement>

<!-- 子级 pom.xml-->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
        </dependency>
    </dependencies>

2. 环境 application.properties


# Base
banner.charset=UTF-8
server.tomcat.uri-encoding=UTF-8
spring.http.encoding.charset=UTF-8
spring.http.encoding.enabled=true
spring.http.encoding.force=true
spring.messages.encoding=UTF-8
# Mysql
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&serverTimezone=PRC&characterEncoding=utf8&useSSL=false
spring.datasource.username=root
spring.datasource.password=
# Mybatis
mybatis.mapper-locations=classpath:mapper/*.xml
# Html Template [LEGACYHTML5\u975E\u4E25\u683C, HTML5\u4E25\u683C]
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.cache=false
spring.thymeleaf.check-template=true
spring.thymeleaf.check-template-location=true
spring.thymeleaf.prefix=classpath:views/
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.suffix=.html

3. 数据库 `test` 和数据表 `user`及相关测试数据


CREATE DATABASE `test` DEFAULT CHARSET utf8;
CREATE TABLE `user` (
  `id` int(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL,
  `age` int(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=52 DEFAULT CHARSET=utf8;
INSERT INTO `user` VALUES (1, '工作人员1', 21);
INSERT INTO `user` VALUES (2, '工作人员2', 22);
INSERT INTO `user` VALUES (3, '工作人员3', 23);
INSERT INTO `user` VALUES (4, '工作人员4', 24);
INSERT INTO `user` VALUES (5, '工作人员5', 25);
INSERT INTO `user` VALUES (6, '工作人员6', 26);
INSERT INTO `user` VALUES (7, '工作人员7', 27);
INSERT INTO `user` VALUES (8, '工作人员8', 28);
INSERT INTO `user` VALUES (9, '工作人员9', 29);
INSERT INTO `user` VALUES (10, '工作人员10', 30);
INSERT INTO `user` VALUES (11, '工作人员11', 31);
INSERT INTO `user` VALUES (12, '工作人员12', 32);
INSERT INTO `user` VALUES (13, '工作人员13', 33);
INSERT INTO `user` VALUES (14, '工作人员14', 34);
INSERT INTO `user` VALUES (15, '工作人员15', 35);
INSERT INTO `user` VALUES (16, '工作人员16', 36);
INSERT INTO `user` VALUES (17, '工作人员17', 37);
INSERT INTO `user` VALUES (18, '工作人员18', 38);
INSERT INTO `user` VALUES (19, '工作人员19', 39);
INSERT INTO `user` VALUES (20, '工作人员20', 40);
INSERT INTO `user` VALUES (21, '工作人员21', 41);
INSERT INTO `user` VALUES (22, '工作人员22', 42);
INSERT INTO `user` VALUES (23, '工作人员23', 43);
INSERT INTO `user` VALUES (24, '工作人员24', 44);
INSERT INTO `user` VALUES (25, '工作人员25', 45);
INSERT INTO `user` VALUES (26, '工作人员26', 46);
INSERT INTO `user` VALUES (27, '工作人员27', 47);
INSERT INTO `user` VALUES (28, '工作人员28', 48);
INSERT INTO `user` VALUES (29, '工作人员29', 49);
INSERT INTO `user` VALUES (30, '工作人员30', 50);
INSERT INTO `user` VALUES (31, '工作人员31', 51);
INSERT INTO `user` VALUES (32, '工作人员32', 52);
INSERT INTO `user` VALUES (33, '工作人员33', 53);
INSERT INTO `user` VALUES (34, '工作人员34', 54);
INSERT INTO `user` VALUES (35, '工作人员35', 55);
INSERT INTO `user` VALUES (36, '工作人员36', 56);
INSERT INTO `user` VALUES (37, '工作人员37', 57);
INSERT INTO `user` VALUES (38, '工作人员38', 58);
INSERT INTO `user` VALUES (39, '工作人员39', 59);
INSERT INTO `user` VALUES (40, '工作人员40', 60);
INSERT INTO `user` VALUES (41, '工作人员41', 61);
INSERT INTO `user` VALUES (42, '工作人员42', 62);
INSERT INTO `user` VALUES (43, '工作人员43', 63);
INSERT INTO `user` VALUES (44, '工作人员44', 64);
INSERT INTO `user` VALUES (45, '工作人员45', 65);
INSERT INTO `user` VALUES (46, '工作人员46', 66);
INSERT INTO `user` VALUES (47, '工作人员47', 67);
INSERT INTO `user` VALUES (48, '工作人员48', 68);
INSERT INTO `user` VALUES (49, '工作人员49', 69);
INSERT INTO `user` VALUES (50, '工作人员50', 70);
INSERT INTO `user` VALUES (51, '工作人员51', 71);

4. User.java(Entity)与 `user`数据表字段对应


import java.io.Serializable;

public class User implements Serializable {
    private static final long serialVersionUID = 8755803182642361875L;

    private Long id;

    private Long age;

    private String name;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public Long getAge() {
        return age;
    }

    public void setAge(Long age) {
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

5. DAO(Data Access Object)数据访问接口 UserDao.java和实现类 UserDaoImpl.java


/**
* User的数据访问接口 UserDao.java
*/
import com.test.web2.entity.User;
import java.util.List;

public interface UserDao {
    List<User> getList(Integer pageNo, Integer pageSize);
}

/**
* 实现类 UserDaoImpl.java
*/
import com.github.pagehelper.PageHelper;
import com.test.web2.dao.UserDao;
import com.test.web2.entity.User;
import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import java.util.List;

@Repository
public class UserDaoImpl implements UserDao {
    @Autowired
    private SqlSession sqlSession;

    static final String MAPPER = "com.test.web2.UserMapper.";

    @Override
    public List<User> getList(final Integer pageNo, final Integer pageSize) {
        PageHelper.startPage(pageNo, pageSize);
        return sqlSession.selectList(MAPPER + "getList");
    }

}

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.test.web2.UserMapper">
	<select id="getList" resultType="com.test.web2.entity.User">
		SELECT `id`,`age`,`name` FROM `user`
	</select>
</mapper>

7. userList.html


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <!-- https://code.jquery.com/ -->
    <script th:src="@{/jquery-1.12.4.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <!-- 分页插件-->
    <!-- https://www.bootcdn.cn/jquery-bootpag/ -->
    <script th:src="@{/bootstrap/js/jquery.bootpag.min.js}"></script>
</head>
<body>
<h4>用户列表:</h4>

<!-- 搜索表单, 未做搜索功能所以隐藏表单 -->
<div style="display: none;">
    <form name="f" id="f">
        <input type="hidden" name="pageNo" id="pageNo" th:value="${pageNo}">
        <input type="hidden" name="pageSize" id="pageSize" value="10">
    </form>
</div>

<div style="width:400px;">
    <table width="400" border="1" cellspacing="4" cellpadding="4">
        <thead>
        <tr>
            <th >用户编号</th>
            <th >年龄</th>
            <th >名字</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${list}">
            <td th:text="${user.id}" align="center"></td>
            <td th:text="${user.age}" align="center"></td>
            <td th:text="${user.name}" align="center"></td>
        </tr>
        <tr th:if="${list.size() == 0}">
            <td colspan="3" align="center">没有用户!</td>
        </tr>
        </tbody>
    </table>

    <!-- 分页 DIV-->
    <div id="page-selection" th:if="${pageCount > 1}" style="text-align:center;"></div>
</div>

<script th:inline="javascript" type="text/javascript">
    /**
     * 生成分页
     * */
    $('#page-selection').bootpag({
        page: [[${pageNo}]], /** 当前页*/
        total: [[${pageCount}]], /** 总页数*/
        maxVisible: 4 /** 分页按钮显示最大数*/
    }).on("page", function(event, pageNo) {
        /**
         * 点击分页按钮, 更改搜索表单内的将要跳转的页
         * */
        $('[name=pageNo]').val(pageNo);
        /**
         * 提交搜索表单
         * */
        document.f.submit();
    });
    $('#page-selection').find('li').last().after('<li><span>共' +[[${pageCount}]] + '页</span></li>');
</script>
</body>
</html>

8. 前端使用了 jquery.bootpag


    <!-- 分页插件-->
    <!-- https://www.bootcdn.cn/jquery-bootpag/ -->
    <script th:src="@{/bootstrap/js/jquery.bootpag.min.js}"></script>

9. UserController.java(入口)


import com.github.pagehelper.PageInfo;
import com.test.web2.dao.UserDao;
import com.test.web2.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.List;

@Controller
public class UserController {
    @Autowired
    private UserDao userDao;

    /**
     * 用户列表
     * */
    @RequestMapping(value = "/getList", method = RequestMethod.GET)
    public String getList(@RequestParam(value = "pageNo", required = false, defaultValue="1") Integer pageNo,
                          @RequestParam(value = "pageSize", required = false, defaultValue="10") Integer pageSize,
                          Model model) {
        /**
         * 获取用户列表
         * */
        final List<User> data = userDao.getList(pageNo, pageSize);
        final PageInfo<User> pages = new PageInfo<>(data);

        /**
         * 用户数据及分页信息绑定到 Model
         * */
        model.addAttribute("pageNo", pages.getPageNum());
        model.addAttribute("pageCount", pages.getPages());
        model.addAttribute("list", pages.getList());
        return "userList";
    }

}

页面浏览


http://127.0.0.1:8080/getList?pageNo=2&pageSize=10

在这里插入图片描述

如果您觉得有帮助，欢迎点赞哦 ~ 谢谢!!

点赞 6
评论 3
分享
x
海报分享

扫一扫，分享海报
收藏 1
打赏

打赏

Shawn Jeon

你的鼓励将是我创作的最大动力

C币余额

2C币 4C币 6C币 10C币 20C币 50C币

确定
举报
关注关注
一键三连
点赞Mark关注该博主, 随时了解TA的最新博文

已标记关键词清除标记

插入表情

还能输入1000个字符 “速评一下”