devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

分页插件功能的实现_page.getpages()

作者：小桥流水78 | 2024-07-21 12:14:46

赞

踩

page.getpages()

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

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

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

  1.         <!-- 分页插件 -->
  2.         <dependency>
  3.             <groupId>com.github.pagehelper</groupId>
  4.             <artifactId>pagehelper-spring-boot-starter</artifactId>
  5.             <version>1.3.0</version>
  6.         </dependency>

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

  1.  @Autowired
  2.     private StudentServiceImpl studentService;
  3.  
  4.     @RequestMapping("/findAllStudent")
  5.     public String findAllStudent(Model model,@RequestParam(required=true,value="pageNum",defaultValue="1") Integer pageNum){
  6.         Page<Student> page = PageHelper.startPage(pageNum, 6);  //设置页面的大小
  7.         List<Student> list=studentService.findAllStudent();
  8.         model.addAttribute("list",list);
  9.         model.addAttribute("pageNum", pageNum);
  10.         model.addAttribute("totalPages", page.getPages());
  11.         return "result";
  12.     }

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

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

3、前端部分的页面

  1. <!--页码，虽然idea报错，但是没事儿-->
  2. <div class="page" th:if="${totalPages>=1} " style="background: white">
  3.  
  4.     <!-- 页数较少时填充 -->
  5.     <div th:if="${totalPages<8}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
  6.  
  7.     <!--上一页-->
  8.     <div class="page-item fl bg-color-f2f2f2">
  9.         <a th:href="@{'/findAllStudent/?pageNum='+${pageNum-1}}">
  10.             <i class="layui-icon  layui-icon-prev"></i>
  11.         </a>
  12.     </div>
  13.  
  14.     <!--首页-->
  15.     <div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==1} ? 'background-color:#ffd84d !important;')">
  16.         <a th:href="@{'/findAllStudent/?pageNum=1'}">1</a>
  17.     </div>
  18.  
  19.     <!--页数过多时的省略号-->
  20.     <div class="page-item fl" th:if="${totalPages > 9 && pageNum > 5}">
  21.         <img alt="省略" th:src="@{/images/ellipsis.png}"/>
  22.     </div>
  23.  
  24.     <!--中间部分的页面显示-->
  25.     <div th:if="${totalPages<=9 && totalPages>=3}" th:each="i:${#numbers.sequence(2, totalPages-1)}"
  26.          class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
  27.         <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
  28.     </div>
  29.     <div th:if="${totalPages > 9}">
  30.         <div th:if="${pageNum <= 5}" th:each="i:${#numbers.sequence(2, 7)}"
  31.              class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
  32.             <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
  33.         </div>
  34.         <div th:if="${pageNum >= (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
  35.              class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
  36.             <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
  37.         </div>
  38.         <div th:if="${pageNum>5 && pageNum < (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
  39.              class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
  40.             <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
  41.         </div>
  42.     </div>
  43.  
  44.     <!--页数过多时的省略号-->
  45.     <div th:if="${totalPages > 9 && pageNum < (totalPages-4)}" class="page-item fl">
  46.         <img alt="省略" th:src="@{/images/ellipsis.png}"/>
  47.     </div>
  48.  
  49.     <!--尾页-->
  50.     <div th:if="${totalPages > 1}">
  51.         <div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==totalPages} ? 'background-color:#ffd84d !important;')">
  52.             <a th:href="@{'/findAllStudent/?pageNum='+${totalPages}}" th:text="${totalPages}"></a>
  53.         </div>
  54.     </div>
  55.  
  56.     <!--下一页-->
  57.     <div class="page-item fl bg-color-f2f2f2">
  58.         <a th:href="@{'/findAllStudent/?pageNum='+${pageNum+1}}">
  59.             <i class="layui-icon layui-icon-next"></i>
  60.         </a>
  61.     </div>
  62.  
  63.     <!-- 页数较少时填充 -->
  64.     <div th:if="${totalPages<9}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
  65. </div>

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

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

  1. <body >
  2.  
  3.  
  4. <div class="layui-form" >
  5.     <table class="layui-table">
  6.         <colgroup>
  7.             <col width="100">
  8.             <col width="300">
  9.             <col width="150">
  10.             <col>
  11.         </colgroup>
  12.         <thead>
  13.         <tr>
  14.             <th>编号</th>
  15.             <th>姓名</th>
  16.             <th>性别</th>
  17.             <th>年龄</th>
  18.             <th>创建时间</th>
  19.             <th>更新时间</th>
  20.             <th>操作方式</th>
  21.         </tr>
  22.         </thead>
  23.         <tbody id="tbody">
  24.         <tr th:each="item:${list}" th:id="'item-'+${item.getStudentId()}">
  25.             <td th:text="${item.getStudentId()}"></td>
  26.             <td th:text="${item.getStudentName()}" th:id="'name-'+${item.getStudentId()}"></td>
  27.             <td th:text="${item.getStudentSex()}" th:id="'sex-'+${item.getStudentId()}"></td>
  28.             <td th:text="${item.getStudentAge()}" th:id="'name-'+${item.getStudentId()}"></td>
  29.             <td th:text="${item.getCreateTime()}" th:id="'name-'+${item.getStudentId()}"></td>
  30.             <td th:text="${item.getUpdateTime()}" th:id="'name-'+${item.getStudentId()}"></td>
  31.             <td>
  32.                 <a href="/update" shiro:hasPermission="svip">
  33.                 <button type="button" class="layui-btn" >
  34.                     <i class="layui-icon"></i></button>
  35.                 </a>
  36.                 <a shiro:hasPermission="svip">
  37.                 <button type="button" class="layui-btn layui-btn-danger" th:onclick="|deleteStudent(${item.getStudentId()})|">
  38.                     <i class="layui-icon"></i></button>
  39.  
  40.                 </a>
  41.             </td>
  42.         </tr>
  43.         </tbody>
  44.     </table>
  45. </div>
  46.  
  47. <!--页码，虽然idea报错，但是没事儿-->
  48. <div class="page" th:if="${totalPages>=1} " style="background: white">
  49.     <!-- 页数较少时填充 -->
  50.     <div th:if="${totalPages<8}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
  51.     <!--上一页-->
  52.     <div class="page-item fl bg-color-f2f2f2">
  53.         <a th:href="@{'/findAllStudent/?pageNum='+${pageNum-1}}">
  54.             <i class="layui-icon  layui-icon-prev"></i>
  55.         </a>
  56.     </div>
  57.     <!--首页-->
  58.     <div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==1} ? 'background-color:#ffd84d !important;')">
  59.         <a th:href="@{'/findAllStudent/?pageNum=1'}">1</a>
  60.     </div>
  61.     <!--页数过多时的省略号-->
  62.     <div class="page-item fl" th:if="${totalPages > 9 && pageNum > 5}">
  63.         <img alt="省略" th:src="@{/images/ellipsis.png}"/>
  64.     </div>
  65.     <!--中间部分的页面显示-->
  66.     <div th:if="${totalPages<=9 && totalPages>=3}" th:each="i:${#numbers.sequence(2, totalPages-1)}"
  67.          class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
  68.         <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
  69.     </div>
  70.     <div th:if="${totalPages > 9}">
  71.         <div th:if="${pageNum <= 5}" th:each="i:${#numbers.sequence(2, 7)}"
  72.              class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
  73.             <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
  74.         </div>
  75.         <div th:if="${pageNum >= (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
  76.              class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
  77.             <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
  78.         </div>
  79.         <div th:if="${pageNum>5 && pageNum < (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
  80.              class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
  81.             <a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
  82.         </div>
  83.     </div>
  84.     <!--页数过多时的省略号-->
  85.     <div th:if="${totalPages > 9 && pageNum < (totalPages-4)}" class="page-item fl">
  86.         <img alt="省略" th:src="@{/images/ellipsis.png}"/>
  87.     </div>
  88.     <!--尾页-->
  89.     <div th:if="${totalPages > 1}">
  90.         <div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==totalPages} ? 'background-color:#ffd84d !important;')">
  91.             <a th:href="@{'/findAllStudent/?pageNum='+${totalPages}}" th:text="${totalPages}"></a>
  92.         </div>
  93.     </div>
  94.  
  95.     <!--下一页-->
  96.     <div class="page-item fl bg-color-f2f2f2">
  97.         <a th:href="@{'/findAllStudent/?pageNum='+${pageNum+1}}">
  98.             <i class="layui-icon layui-icon-next"></i>
  99.         </a>
  100.     </div>
  101.     <!-- 页数较少时填充 -->
  102.     <div th:if="${totalPages<9}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
  103. </div>
  104.  
  105.  
  106.  
  107.  
  108. <script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js}"></script>
  109. <script th:src="@{https://www.layuicdn.com/layui-v2.5.7/layui.js}"></script>
  110.  
  111. <script>
  112.  
  113.     function deleteStudent(id) {
  114.         $.ajax({
  115.             url: "/deleteStudent",
  116.             type: "post",
  117.             data: {
  118.                 id: id
  119.             },
  120.             success: function (data) {
  121.                 let Jdata = JSON.parse(data);
  122.                 if (Jdata.code === "200") {
  123.                     $("#item-"+id).remove();
  124.                 }
  125.             }
  126.         })
  127.     }
  128.  
  129.     function updateStudentForUI(id) {
  130.         let td_name = $("#name-"+id)
  131.         let name = td_name.text()
  132.         td_name.empty()
  133.         td_name.append("<input id='td-name-input-"+id+"' type='text' name='name' value='"+name+"' style='height: 26px;'>")
  134.         td_name.append("<button type=\"button\" class=\"layui-btn\" onclick=\"updateStudent("+id+")\"><i class=\"layui-icon\"></i></button>")
  135.     }
  136.  
  137.     // function updateStudent(id) {
  138.     //     let td_name = $("#name-"+id)
  139.     //     let name = $("#td-name-input-"+id).val();
  140.  
  141.     //     $.ajax({
  142.     //         url: "/updateStudent",
  143.     //         type: "post",
  144.     //         data: {
  145.     //             id: id,
  146.     //             name: name,
  147.     //             sex:sex,
  148.     //             age:age,
  149.     //             createTime:time;
  150.     //         },
  151.     //         success: function (data) {
  152.     //             let Jdata = JSON.parse(data);
  153.     //             if (Jdata.code === "200") {
  154.     //                 td_name.empty();
  155.     //                 td_name.text(name)
  156.     //             }
  157.     //         }
  158.     //     })
  159.     // }
  160. </script>
  161. </body>

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

layui引用的是cdn的样式。

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

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/860798
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号