Spring Boot + pageHelper 实现简单分页 前后端

Posted 2023-03-02 红尘沙漏

准备环境

pow.xml导入依赖

 <!-- 增加对PageHelper的支持 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>

　　

编写PageHelperConfig类

PageHelperConfig类的作用就是：开启一些我们需要的功能。
需要的功能看注解。

import java.util.Properties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.github.pagehelper.PageHelper;

@Configuration
public class PageHelperConfig 
    @Bean
    public PageHelper pageHelper() 
        PageHelper pageHelper = new PageHelper();
        Properties p = new Properties();
        //1.offsetAsPageNum:设置为true时，会将RowBounds第一个参数offset当成pageNum页码使用.
        p.setProperty("offsetAsPageNum", "true");
        //2.rowBoundsWithCount:设置为true时，使用RowBounds分页会进行count查询.
        p.setProperty("rowBoundsWithCount", "true");
        //3.reasonable：启用合理化时，如果pageNum<1会查询第一页，如果pageNum>pages会查询最后一页。
        p.setProperty("reasonable", "true");
        pageHelper.setProperties(p);
        return pageHelper;
    

　　

后端Controller代码

后端Controller的作用就是：获取分页信息，然后传入前端。

PageInfo对象里面包含了我们分页所需要的所有信息：像是前一页页码，前一页有没有，一共多少页，当前页的页码等等，都有。

    @Autowired
    private UserMapper userMapper;

    @RequestMapping("/index")
    public String selectUser(Model model,
                             Integer selectId,
                             @RequestParam(value="currentPage",defaultValue="1")int currentPage,
                             @RequestParam(value = "size", defaultValue = "5") int size)
            throws Exception 
        //1. 在参数里接受当前是第几页 start ，以及每页显示多少条数据 size。 默认值分别是1和5。

        //2. 根据start,size进行分页
        PageHelper.startPage(currentPage,5);
        //3. 因为PageHelper的作用，这里就会返回当前分页的集合了
        List<User> cs=new LinkedList<User>();
        cs = userMapper.findAllUser();

        //4. 根据返回的集合，创建PageInfo对象
        PageInfo<User> page = new PageInfo<>(cs);

        //5. 把PageInfo对象扔进model，以供后续显示
        System.out.println(page);
        model.addAttribute("users",page.getList());
        model.addAttribute("page", page);


        //6. 跳转到html
        return "selectUser";
    

　　

编写前端代码

前端代码作用就是获取后端传入的信息，并将他展示

<div align="center" class="container-fluid" >


    <table class="table">
        <tr>
            <th>用户编号</th>
            <th>用户名字</th>
            <th>生日</th>
            <th>性别</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        <tr th:each="user:$users">
            <td th:text="$user.id">空</td>
            <td th:text="$user.userName">空</td>
            <td th:text="$user.birthday ">空</td>
            <td th:text="$user.sex">空</td>
            <td th:text="$user.address">空</td>
            <td>
                <a th:href="@/toUpdateUser(id=$user.id)">修改</a>
                <a onclick="return confirm(\'确定删除吗？\')" th:href="@/deleteUser(id=$user.id)">删除</a>
            </td>
        </tr>
    </table>

        <br>
        <div >
            <nav aria-label="Page navigation example ">
                <ul class="pagination justify-content-center">
                    <li class="page-item">
                        <a class="page-link disabled" th:text="\'共 \'+ $page.getPages()+ \' 页\'">
<!--                            <b > </b>-->
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" th:href="@/index(currentPage=$page.getFirstPage())" href="#">首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" th:if="$page.hasPreviousPage == true"
                           th:href="@/index(currentPage=$page.getPrePage())" href="#"
                           th:text="$page.prePage+\' \'"
                        >上一页</a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#"
                           th:text="$page.pageNum+\' \'"
                           th:href="@\'/index?currentPage=\' + $page.pageNum"

                        />
                    </li>
                    <li class="page-item"

                    >
                        <a class="page-link" href="#"
                           th:if="$page.hasNextPage == true"
                           th:href="@/index(currentPage=$page.getNextPage())"
                           th:text="$page.nextPage+\' \'"
                        >下一页</a>
                    </li>
                    <li class="page-item" >
                        <a class="page-link" href="#"
                           th:href="@/index(currentPage=$page.getLastPage())">尾页</a>
                    </li>

                </ul>
            </nav>
        </div>
        <br>
</div>

　　原文地址：https://www.cnblogs.com/kingwz/p/16745250.html