springboot实现分页功能

引入pom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.

星晨羽

25531人浏览 · 2022-02-06 13:43:07

星晨羽 · 2022-02-06 13:43:07 发布

引入pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.7</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.huyangfeng</groupId>
    <artifactId>springboot-student-crud</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-student-crud</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <!--JDBC-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!--<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>-->
        <!--thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--web-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--mybatis整合springboot-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.1</version>
        </dependency>
        <!--<dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-springsecurity5</artifactId>
        </dependency>-->
        <!--mysql连接驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!--lombok：偷懒神器-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter -->
        <dependency><!--导入分页插件-->
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.3.0</version>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

实体

接口

Service

mapper.xml

ServiceImpl

package com.xc.service.serviceImpl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.xc.mapper.Studentmapper;
import com.xc.pojo.Student;
import com.xc.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * 星晨
 */
@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private Studentmapper studentmapper;

    @Override
    public PageInfo<Student> queryAllByPage(Integer pageNum, Integer pageSize) {
        //开启分页
        PageHelper.startPage(pageNum,pageSize);
        List<Student> students = studentmapper.queryAllByPage();
        PageInfo<Student> pageInfo = new PageInfo<>(students);
        return pageInfo;
    }
}

Controller

package com.xc.controller;

import com.github.pagehelper.PageInfo;
import com.xc.pojo.Student;
import com.xc.service.StudentService;
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.RequestParam;

/**
 * 星晨
 */
@Controller
public class StudentController {

    @Autowired
    private StudentService studentService;

    @RequestMapping("/list")
    public String queryAllByPage(@RequestParam(value = "pageNum",required = false,defaultValue = "1")Integer pageNum,
                                 @RequestParam(value = "pageSize",required = false,defaultValue = "5")Integer pageSize,
                                 Model model){
        PageInfo<Student> studentPageInfo = studentService.queryAllByPage(pageNum, pageSize);
//        System.out.println(studentPageInfo);
//        System.out.println(studentPageInfo.getList());
//        System.out.println(studentPageInfo.getList().indexOf(1)+1);
        model.addAttribute("studentPageInfo",studentPageInfo);
        return "list";
    }

}

前端

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
</head>

<body>
<div class="box">
    <div class="insert">
    </div>
    <table class="table table-hover" border="1" cellspacing="0" cellpadding="0">
        <thead >
        <tr >
            <th class="text-center">学生ID</th>
            <th class="text-center">学生姓名</th>
            <th class="text-center">学生密码</th>
            <th class="text-center">学生年龄</th>
            <th class="text-center">学生性别</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="st,itemSta:${studentPageInfo.list}">
            <td th:text="${itemSta.index+1}"></td>
            <td th:text="${st.studentname}"></td>
            <td th:text="${st.studentpswd}"></td>
            <td th:text="${st.studentage}"></td>
            <td th:text="${st.studentsex==1?'男':'女'}"></td>
        </tr>
        </tbody>
    </table>
</div>

<div class="as">
    <div class="as one">
        当前第<span th:text="${studentPageInfo.pageNum}"></span> 页，
        共<span th:text="${studentPageInfo.pages}"></span> 页，
        <span th:text="${studentPageInfo.total}"></span>条记录
    </div>
    <ul class="as current" style="list-style: none">
        <!--th:if="${studentPageInfo.hasPreviousPage}"}-->
        <li th:if="${studentPageInfo.hasPreviousPage}"}><!--hasPreviousPage默认值为false， 如果有上一页，则不显示首页-->
            <a th:href="@{/list?pageNum=}+${1}">首页</a>
        </li>
        <li th:if="${studentPageInfo.hasPreviousPage}"><!--hasPreviousPage默认值为false， 如果有上一页，则不显示-->
            <a th:href="@{/list?pageNum=}+${studentPageInfo.prePage}">上一页</a>
        </li>
        <li th:each="nav:${studentPageInfo.navigatepageNums}"><!--navigatepageNums是一个数组：遍历所有导航页号。 -->
            <a th:href="@{/list?pageNum=}+${nav}" th:text="${nav}" th:if="${nav != studentPageInfo.pageNum}"></a><!--如果不是当前页则可以跳转其他页面。遍历展示-->
            <a th:class="${'active'}" th:if="${nav == studentPageInfo.pageNum}" th:text="${nav}"></a><!--如果是当前页则有样式。遍历 展示-->
        </li>
        <li th:if="${studentPageInfo.hasNextPage}"><!--hasNextPage默认值为false， 如果没有下一页，则不显示-->
            <a th:href="@{/list?pageNum=}+${studentPageInfo.nextPage}">下一页</a>
        </li>
        <li th:if="${studentPageInfo.pageNum < studentPageInfo.pages}"><!--如果当前页小于总页数则不显示尾页 -->
            <a th:href="@{/list?pageNum=}+${studentPageInfo.pages}">尾页</a>
        </li>
    </ul>
</div>



</body>
</html>
<style>
    .table-hover{
        text-align: center;
    }
    .as .current{
        width: 600px;
        text-align: center;
    }
    ul::after{
        content:"";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    ul{
        margin-left: -35px;
    }
    .one{
        margin-left: 15px;
    }
    ul a{
        text-decoration: none;
        display: inline-block;
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;

    }
    ul li{
        float: left;
        background: #ffc0cb;
        list-style: none;
        margin: 10px;
        border-radius: 10px;
    }
    .active{
        background-color: orange;
        border-radius: 10px;
    }

</style>