分页插件功能的实现

最新推荐文章于 2022-11-21 08:45:41 发布

路远·情长

最新推荐文章于 2022-11-21 08:45:41 发布

阅读量509

点赞数

分类专栏： springboot后端 pagehelper分页插件工具前端加后端代码实现文章标签： github

本文链接：https://blog.csdn.net/weixin_43973940/article/details/116521451

版权

springboot后端同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

pagehelper分页插件工具

1 篇文章 0 订阅

订阅专栏

前端加后端代码实现

1 篇文章 0 订阅

订阅专栏

前言：本人是刚学习java后端不久，所以通过记录一下平时所学知识，方便日后的复习，如果有出错的地方，还望包含。

1、因为使用分页插件，所以整个功能的实现也是非常的简单

首先是导入分页插件相关的坐标，从而可以使用分页插件相关的类。

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

2、在查找接口中，添加对应的插件功能，提供几个参数供前端进行使用。

 @Autowired
    private StudentServiceImpl studentService;

    @RequestMapping("/findAllStudent")
    public String findAllStudent(Model model,@RequestParam(required=true,value="pageNum",defaultValue="1") Integer pageNum){
        Page<Student> page = PageHelper.startPage(pageNum, 6);  //设置页面的大小
        List<Student> list=studentService.findAllStudent();
        model.addAttribute("list",list);
        model.addAttribute("pageNum", pageNum);
        model.addAttribute("totalPages", page.getPages());
        return "result";
    }

整个分页插件的使用部分，就这些，其他的配置什么的都是插件本身的底层自身实现的，我们只需要提供给前端几个简单的参数供前端使用就行。

相比于后端，前端的使用更加的复杂。

3、前端部分的页面

<!--页码，虽然idea报错，但是没事儿-->
<div class="page" th:if="${totalPages>=1} " style="background: white">

    <!-- 页数较少时填充 -->
    <div th:if="${totalPages<8}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>

    <!--上一页-->
    <div class="page-item fl bg-color-f2f2f2">
        <a th:href="@{'/findAllStudent/?pageNum='+${pageNum-1}}">
            <i class="layui-icon  layui-icon-prev"></i>
        </a>
    </div>

    <!--首页-->
    <div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==1} ? 'background-color:#ffd84d !important;')">
        <a th:href="@{'/findAllStudent/?pageNum=1'}">1</a>
    </div>

    <!--页数过多时的省略号-->
    <div class="page-item fl" th:if="${totalPages > 9 && pageNum > 5}">
        <img alt="省略" th:src="@{/images/ellipsis.png}"/>
    </div>

    <!--中间部分的页面显示-->
    <div th:if="${totalPages<=9 && totalPages>=3}" th:each="i:${#numbers.sequence(2, totalPages-1)}"
         class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
        <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
    </div>
    <div th:if="${totalPages > 9}">
        <div th:if="${pageNum <= 5}" th:each="i:${#numbers.sequence(2, 7)}"
             class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
            <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
        </div>
        <div th:if="${pageNum >= (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
             class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
            <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
        </div>
        <div th:if="${pageNum>5 && pageNum < (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
             class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
            <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
        </div>
    </div>

    <!--页数过多时的省略号-->
    <div th:if="${totalPages > 9 && pageNum < (totalPages-4)}" class="page-item fl">
        <img alt="省略" th:src="@{/images/ellipsis.png}"/>
    </div>

    <!--尾页-->
    <div th:if="${totalPages > 1}">
        <div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==totalPages} ? 'background-color:#ffd84d !important;')">
            <a th:href="@{'/findAllStudent/?pageNum='+${totalPages}}" th:text="${totalPages}"></a>
        </div>
    </div>

    <!--下一页-->
    <div class="page-item fl bg-color-f2f2f2">
        <a th:href="@{'/findAllStudent/?pageNum='+${pageNum+1}}">
            <i class="layui-icon layui-icon-next"></i>
        </a>
    </div>

    <!-- 页数较少时填充 -->
    <div th:if="${totalPages<9}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
</div>

注释：将这个界面放在你的展示页面下面就可以生效。

下面是较为完整的前端代码：

<body >


<div class="layui-form" >
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col width="300">
            <col width="150">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <th>操作方式</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr th:each="item:${list}" th:id="'item-'+${item.getStudentId()}">
            <td th:text="${item.getStudentId()}"></td>
            <td th:text="${item.getStudentName()}" th:id="'name-'+${item.getStudentId()}"></td>
            <td th:text="${item.getStudentSex()}" th:id="'sex-'+${item.getStudentId()}"></td>
            <td th:text="${item.getStudentAge()}" th:id="'name-'+${item.getStudentId()}"></td>
            <td th:text="${item.getCreateTime()}" th:id="'name-'+${item.getStudentId()}"></td>
            <td th:text="${item.getUpdateTime()}" th:id="'name-'+${item.getStudentId()}"></td>
            <td>
                <a href="/update" shiro:hasPermission="svip">
                <button type="button" class="layui-btn" >
                    <i class="layui-icon"></i></button>
                </a>
                <a shiro:hasPermission="svip">
                <button type="button" class="layui-btn layui-btn-danger" th:onclick="|deleteStudent(${item.getStudentId()})|">
                    <i class="layui-icon"></i></button>

                </a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!--页码，虽然idea报错，但是没事儿-->
<div class="page" th:if="${totalPages>=1} " style="background: white">
    <!-- 页数较少时填充 -->
    <div th:if="${totalPages<8}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
    <!--上一页-->
    <div class="page-item fl bg-color-f2f2f2">
        <a th:href="@{'/findAllStudent/?pageNum='+${pageNum-1}}">
            <i class="layui-icon  layui-icon-prev"></i>
        </a>
    </div>
    <!--首页-->
    <div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==1} ? 'background-color:#ffd84d !important;')">
        <a th:href="@{'/findAllStudent/?pageNum=1'}">1</a>
    </div>
    <!--页数过多时的省略号-->
    <div class="page-item fl" th:if="${totalPages > 9 && pageNum > 5}">
        <img alt="省略" th:src="@{/images/ellipsis.png}"/>
    </div>
    <!--中间部分的页面显示-->
    <div th:if="${totalPages<=9 && totalPages>=3}" th:each="i:${#numbers.sequence(2, totalPages-1)}"
         class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
        <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
    </div>
    <div th:if="${totalPages > 9}">
        <div th:if="${pageNum <= 5}" th:each="i:${#numbers.sequence(2, 7)}"
             class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
            <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
        </div>
        <div th:if="${pageNum >= (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
             class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
            <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
        </div>
        <div th:if="${pageNum>5 && pageNum < (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
             class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
            <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
        </div>
    </div>
    <!--页数过多时的省略号-->
    <div th:if="${totalPages > 9 && pageNum < (totalPages-4)}" class="page-item fl">
        <img alt="省略" th:src="@{/images/ellipsis.png}"/>
    </div>
    <!--尾页-->
    <div th:if="${totalPages > 1}">
        <div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==totalPages} ? 'background-color:#ffd84d !important;')">
            <a th:href="@{'/findAllStudent/?pageNum='+${totalPages}}" th:text="${totalPages}"></a>
        </div>
    </div>

    <!--下一页-->
    <div class="page-item fl bg-color-f2f2f2">
        <a th:href="@{'/findAllStudent/?pageNum='+${pageNum+1}}">
            <i class="layui-icon layui-icon-next"></i>
        </a>
    </div>
    <!-- 页数较少时填充 -->
    <div th:if="${totalPages<9}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
</div>




<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js}"></script>
<script th:src="@{https://www.layuicdn.com/layui-v2.5.7/layui.js}"></script>

<script>

    function deleteStudent(id) {
        $.ajax({
            url: "/deleteStudent",
            type: "post",
            data: {
                id: id
            },
            success: function (data) {
                let Jdata = JSON.parse(data);
                if (Jdata.code === "200") {
                    $("#item-"+id).remove();
                }
            }
        })
    }

    function updateStudentForUI(id) {
        let td_name = $("#name-"+id)
        let name = td_name.text()
        td_name.empty()
        td_name.append("<input id='td-name-input-"+id+"' type='text' name='name' value='"+name+"' style='height: 26px;'>")
        td_name.append("<button type=\"button\" class=\"layui-btn\" onclick=\"updateStudent("+id+")\"><i class=\"layui-icon\"></i></button>")
    }

    // function updateStudent(id) {
    //     let td_name = $("#name-"+id)
    //     let name = $("#td-name-input-"+id).val();

    //     $.ajax({
    //         url: "/updateStudent",
    //         type: "post",
    //         data: {
    //             id: id,
    //             name: name,
    //             sex:sex,
    //             age:age,
    //             createTime:time;
    //         },
    //         success: function (data) {
    //             let Jdata = JSON.parse(data);
    //             if (Jdata.code === "200") {
    //                 td_name.empty();
    //                 td_name.text(name)
    //             }
    //         }
    //     })
    // }
</script>
</body>

注释：这个是查询学生表的功能，会展示一个layui的界面，查询数据库中的所有的学生表，查询的功能和删除的功能很完善，但是更新的功能有缺陷，还没有时间去解决。

layui引用的是cdn的样式。

下面是是用的cdn，如果有本地的也可以使用本地的。

<!DOCTYPE html>
<!--配置thymeleaf的命名空间-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:clear="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引用layui的css样式  -->
    <link rel="stylesheet" type="text/css" th:href="@{https://www.layuicdn.com/layui/css/layui.css}" />
    <!--    引用ajax-->
    <script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js}"></script>
    <!--    引用js-->
    <script th:src="@{https://www.layuicdn.com/layui-v2.5.7/layui.js}"></script>

注释：其他的样式不显示，就是本地的样式，想要使用可以改成自己的本地的样式。

感受，有了分页插件以后，分页很简单，想要移植到其他的地方，也是很简单，只需要改一下参数。

路远·情长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页插件功能的实现

前言：本人是刚学习java后端不久，所以通过记录一下平时所学知识，方便日后的复习，如果有出错的地方，还望包含。1、因为使用分页插件，所以整个功能的实现也是非常的简单首先是导入分页插件相关的坐标，从而可以使用分页插件相关的类。  <dependency> <groupId>com.github.pagehelper</groupId> <a
复制链接

扫一扫