前端自动分页

最新推荐文章于 2025-05-19 14:10:20 发布

GREES

最新推荐文章于 2025-05-19 14:10:20 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

原文链接：https://blog.youkuaiyun.com/qq_45136544/article/details/116054299?spm=1001.2014.3001.5506

这篇博客详细介绍了如何利用jQuery实现一个简单的表格分页功能。首先，引入jQuery库，然后展示了一个包含员工信息的表格。接着，展示了用于分页的HTML结构，包括上一页、下一页和页码列表。通过CSS定义了分页样式，使得分页按钮具有清晰的视觉效果。最后，提供了一段JavaScript代码，用于处理分页逻辑，包括点击页码切换和上下翻页的功能。此示例展示了前端开发中常见的数据分页处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、导入jquery文件

2、需要分页的信息

<table class="layui-table">
   <thead>
      <tr>
         <th>员工编号</th>
         <th>员工姓名</th>
         <th>员工性别</th>
         <th>身份证号码</th>
         <th>电话号码</th>
         <th>工资</th>
         <th>登录账号</th>
         <th>登录密码</th>
         <th>备注</th>
         <th>操作</th>
      </tr>
   </thead>
   <tbody id="pageMain">
      <tr th:each="employee:${employeeList}">
         <td th:text="${employee.getEid()}"></td>
         <td th:text="${employee.getEname()}"></td>
         <td th:text="${employee.getEgender()}"></td>
         <td th:text="${employee.getEnumber()}"></td>
         <td th:text="${employee.getEphone()}"></td>
         <td th:text="${employee.getEsalary()}+'元'"></td>
         <td th:text="${employee.getEusername()}"></td>
         <td th:text="${employee.getEpassword()}"></td>
         <td th:text="${employee.getEremark()}"></td>

         <td>
            <button class="layui-btn layui-btn-xs" th:onclick="|updateBut('@{/toUpdateEmployee?eid=}+${employee.getEid()}')|">修改</button>
            <button class="layui-btn layui-btn-xs" th:onclick="|deleteOne('@{/employee_deleteOne?eid=}+${employee.getEid()}')|">删除</button>
         </td>
      </tr>
      
   </tbody>
</table>

3、分页连接代码

<div id="pageBox" class="digg">
   <span id="prev" class="disabled">上一页</span>
   <span id="pageNav">
      <a href="javascript:;" class="active">1</a>
      <a href="javascript:;">2</a>
      <a href="javascript:;">3</a>
      <a href="javascript:;">4</a>
      <a href="javascript:;">5</a>
      <a href="javascript:;">6</a>
      <a href="javascript:;">7</a>
      <a href="javascript:;">8</a>
   </span>
   <span class="disabled" id="next">下一页</span>
   <span id="curye" style="color: red"></span>
</div>

4、css样式

<style>
   DIV.digg {
      PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;
      MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
   }
   DIV.digg A {
      BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid;
      PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
      BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px;
      BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
   }
   DIV.digg A:hover {
      BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid;
      BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
   }
   DIV.digg A:active {
      BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid;
      BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
   }
   DIV.digg SPAN.current {
      BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px;
      BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold;
      PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid;
      COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
   }
   DIV.digg SPAN.disabled {
      BORDER-RIGHT: #1583ee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #1583ee 1px solid;
      PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
      BORDER-LEFT: #1583ee 1px solid; COLOR: #162fee; PADDING-TOP: 2px;
      BORDER-BOTTOM: #1583ee 1px solid
   }
</style>

5、js代码

//分页的js
$(function() {
   fenye2();
});
function fenye2() {
   var tabPage;
   tabPage({
      pageMain: '#pageMain',
      pageNav: '#pageNav',
      pagePrev: '#prev',
      pageNext: '#next',
      curNum: 6,
      /*每页显示的条数*/
      activeClass: 'active',
      /*高亮显示的class*/
      ini: 0,
      /*初始化显示的页面*/
      curye:"#curye"
   });

   function tabPage(tabPage) {
      var pageMain = $(tabPage.pageMain);
      /*获取内容列表*/
      var pageNav = $(tabPage.pageNav);
      /*获取分页*/
      var pagePrev = $(tabPage.pagePrev);
      /*上一页*/
      var pageNext = $(tabPage.pageNext);
      /*下一页*/

      var curye=$(tabPage.curye);
      var curNum = tabPage.curNum;
      /*每页显示数*/
      var len = Math.ceil(pageMain.find("tr").length / curNum);
      /*计算总页数*/
      // console.log(len);
      var pageList = '';
      /*生成页码*/
      var iNum = 0;
      /*当前的索引值*/

      for (var i = 0; i < len; i++) {
         pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
      }
      pageNav.html(pageList);
      curye.html("当前是第"+(iNum+1)+"页");
      /*头一页加高亮显示*/
      pageNav.find("a:first").addClass(tabPage.activeClass);

      /*******标签页的点击事件*******/
      pageNav.find("a").each(
            function () {
               $(this)
                     .click(
                           function () {
                              pageNav.find("a").removeClass(
                                    tabPage.activeClass);
                              $(this).addClass(
                                    tabPage.activeClass);
                              iNum = $(this).index();
                              curye.html("当前是第"+(iNum+1)+"页");
                              $(pageMain).find("tr").hide();
                              for (var i = ($(this).html() - 1)
                                    * curNum; i < ($(this)
                                    .html())
                                  * curNum; i++) {
                                 $(pageMain).find("tr").eq(i)
                                       .show()
                              }

                           });
            })

      $(pageMain).find("tr").hide();
      /************首页的显示*********/
      for (var i = 0; i < curNum; i++) {
         $(pageMain).find("tr").eq(i).show()
      }

      /*下一页*/
      pageNext.click(function () {
         $(pageMain).find("tr").hide();
         if (iNum == len - 1) {
            alert('已经是最后一页');
            for (var i = (len - 1) * curNum; i < len * curNum; i++) {
               $(pageMain).find("tr").eq(i).show()
            }
            return false;
         } else {
            pageNav.find("a").removeClass(tabPage.activeClass);
            iNum++;
            curye.html("当前是第"+(iNum+1)+"页");
            pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
            //                    ini(iNum);
         }
         for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
            $(pageMain).find("tr").eq(i).show()
         }
      });
      /*上一页*/
      pagePrev.click(function () {
         $(pageMain).find("tr").hide();
         if (iNum == 0) {
            alert('当前是第一页');
            for (var i = 0; i < curNum; i++) {
               $(pageMain).find("tr").eq(i).show()
            }
            return false;
         } else {
            pageNav.find("a").removeClass(tabPage.activeClass);
            iNum--;
            curye.html("当前是第"+(iNum+1)+"页");
            pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
         }
         for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
            $(pageMain).find("tr").eq(i).show()
         }
      })

   }
}