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

不会使用js，只实现了简单的分页。

准备环境

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>