springboot+pagehelper 实现分页

最新推荐文章于 2023-07-06 12:10:02 发布

breal

最新推荐文章于 2023-07-06 12:10:02 发布

阅读量297

点赞数

分类专栏： java springboot

本文链接：https://blog.csdn.net/breal/article/details/99288527

版权

java 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

springboot

1 篇文章 0 订阅

订阅专栏

引入pagehelper插件

<!-- 分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>

由于涉及到数据库查询但是这不是很重要所以我就将这部分带过了.使用mybatis

package com.bhg.controller;

import com.bhg.pojo.People;
import com.bhg.service.PeopleService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
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;

import java.util.List;

/**
 * @FileName: PeopleController
 * @Author: bard
 * @Date: 2019/7/15 9:14
 */
@Controller
public class PeopleController {

    @Autowired
    PeopleService peopleService;

    /**
     * 查询所有的person内容
     * @return list列表页面
     */
    @RequestMapping(value = "/user/peopleList")
    public String findAllPeople(@RequestParam(defaultValue = "1") Integer startPage, @RequestParam(defaultValue = "12") Integer pageSize, Model model) {
        /*
         * startPage  第几页开始
         * pageSize   查几条数据
         * */
        PageHelper.startPage(startPage, pageSize);
        List<People> personList = peopleService.selectAll();
        PageInfo<People> personPageInfo = new PageInfo<>(personList,5);
        model.addAttribute("personPageInfo", personPageInfo);
        model.addAttribute("personList", personList);
        return "peopleList";
    }
}

其实只要传递personPageInfo就可以了,我写的时候数据这样传了就没有做改动. PageInfo<People> personPageInfo = new PageInfo<>(personList,5)后面的参数就是设置导航栏的长度.基本引入这个工具类基本就很完善了,我给上我的页面吧

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分页-People</title>
    <link th:href="@{/css/pageHeper.css}" rel='stylesheet' type='text/css'/>
    <script th:src="@{/js/jquery-1.9.1.js}"></script>
</head>
<body>
<div id="table01">
<table border="1">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>战斗力</th>
    </tr>
    <tr th:each="prod : ${personList}">
        <td th:text="${prod.getId()}">Onions</td>
        <td th:text="${prod.getName()}">Onions</td>
        <td th:text="${prod.getAge()}">2.41</td>
    </tr>
    <tbody id="table"></tbody>
</table>
</div>
<p></p>
<!--分页导航栏 start-->
<ul>
    <li>
        <a th:href="@{/user/peopleList(startPage=${personPageInfo.getPageNum()}-1,pageSize=${personPageInfo.getPageSize()})}"
           th:class="active"
           th:if="${personPageInfo.isHasPreviousPage()}"><</a></li>
    <li th:each="page_Num : ${personPageInfo.navigatepageNums}">
        <a th:href="@{#}"
           th:text="${page_Num}"
           th:class="active_butt"
           th:if="${page_Num == personPageInfo.pageNum }"></a>
        <a th:href="@{/user/peopleList(startPage=${page_Num},pageSize=${personPageInfo.getPageSize()})}"
           th:text="${page_Num}"
           th:if="${page_Num != personPageInfo.pageNum }"></a>
    </li>
    <li><a th:href="@{/user/peopleList(startPage=${personPageInfo.nextPage},pageSize=${personPageInfo.getPageSize()})}"
           th:if="${personPageInfo.isHasNextPage()}">></a></li>
</ul>
<!--分页导航栏  end -->
</body>
</html>

顺便给你导航栏的css

body {
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: url(../img/bg1.jpg) no-repeat 0px 0px;
}

#table01 {
    margin: 0 auto;
    width: 300px;
    height: 100px
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-71%, 50%);
    display: flex;
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

ul li a {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    background: #353535;
    text-decoration: none;
    margin: 5px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 5px 10px rgba(0, 0, 0, .1),
    0 2px 10px rgba(0, 0, 0, .1);
}

ul li a:hover {
    color: #fff;
    text-shadow: 0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27);
}

.active_butt{
    color: #1a16ff;
}

效果如下

只是完成基本功能,页面很丑见怪见怪!

breal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springboot+pagehelper 实现分页

引入pagehelper插件 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifa...
复制链接

扫一扫