前端自动分页

最新推荐文章于 2024-02-02 10:01:01 发布
最新推荐文章于 2024-02-02 10:01:01 发布
阅读量211 收藏
点赞数
文章标签： jquery
原文链接：https://blog.csdn.net/qq_45136544/article/details/116054299?spm=1001.2014.3001.5506
版权
这篇博客详细介绍了如何利用jQuery实现一个简单的表格分页功能。首先，引入jQuery库，然后展示了一个包含员工信息的表格。接着，展示了用于分页的HTML结构，包括上一页、下一页和页码列表。通过CSS定义了分页样式，使得分页按钮具有清晰的视觉效果。最后，提供了一段JavaScript代码，用于处理分页逻辑，包括点击页码切换和上下翻页的功能。此示例展示了前端开发中常见的数据分页处理方法。
摘要由CSDN通过智能技术生成

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:οnclick="|updateBut('@{/toUpdateEmployee?eid=}+${employee.getEid()}')|">修改</button>
            <button class="layui-btn layui-btn-xs" th:οnclick="|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()
         }
      })

   }
}

GREES
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的分业前端代码
11-19
自写的分页 jquary 代码 <table data-page-size="4" data-panduan="1" > size表示每页的信息量 puanduan 为1代表经过分页方法 为其他数字或不写 表示不经过分页方法 因为 水平有限 js 代码 应该写得还算浅显 易懂 可以根据自己的需要对代码进行修改 内含css仅供参考 如果是table 是动态加载的比如 ng-repeat 时 则需要加如Ajax监听 每次 响应完毕时 加载方法 例如： $.ajaxSetup({ beforeSend: function () { }, complete: function () { footable_self(); }, error: function () { } }); data-panduan 也是这时起作用的； 如果是静态页面直接：onload=function(){ footable_self(); } 加载方法就好了；具体还是看代码吧。 因为本身学后台的，写得不好的大家指正
前端（Vue）实现自行分页的两种方法
热门推荐
小钻风的博客
03-08 3万+
前端做页面时，经常会遇到表格+分页的组合，有时因为一些原因，需要前端自己实现分页，下面介绍2中方法实现分页， 方法一：slice方法 slice(参数1，参数2)方法是返回一个新的数组对象 参数1：起始下标数 参数2：结束下标数(不计算在内) 如data:[1,2,3,4,5,6,7,8]，那么data.slice(0,3)就为下标为0，1，2,不包括下标为3的数，即[1,2,3]，可以看成数学中的[0,3) slice方法详细讲解 这个原理就和分页原理很相似，分页也是把一个很长的数组，按照每页多少条（s
html用js给文字自动分页,用JS实现前端分页的简单方法 --分页1
weixin_35757191的博客
06-02 421
昨天朋友问我，后台传过来的数据在前端分页显示怎么做。我也只做过后台分页查询前端显示的方法，没有做过后台不分页而在前端分页的形式。于是研究了下后台返回全部数据，在前端将数据分页显示的办法。自己研究再参考网上的办法，分页.table{border:solid #FFAEB9; border-width:1px 0px 0px 1px;width: 100%;font-size: 12px;line-h...
vue + vant 实现前端分页
m0_73478445的博客
01-02 923
前端vue + vant 实现分页
前端分页显示有限页码实现逻辑
花开归矣的博客
11-07 1239
1.一共展示10个页码，能够达到前5后4的效果 2.如果前边不够5个，后边补齐10个 3.如果后边不足4个，前边补齐10个 // 定义页码开始位置begin,结束位置 end var begin; // 开始位置 var end ; // 结束位置 //1.要显示10个页码 if(page.totalPage < 10){ //总页码不够10页 begin = 1; end...
前端分页插件
04-17
2. **懒加载分页**：用户滚动到页面底部时，自动请求下一页数据，实现“无限滚动”效果。 3. **服务器端分页**：每次请求只获取当前页的数据，服务器处理分页逻辑。这种方式对服务器性能要求较高，但用户体验较好。 ...
pagination - 前端分页插件
11-20
在前端开发中，当网页数据量过大时，为了提高用户体验和加载速度，通常会采用分页显示数据。本文将深入探讨“pagination”这一前端分页插件，它可以帮助开发者轻松实现具有CSS样式的分页功能。 分页插件是前端开发...
vue实现前端分页完整代码
10-15
实现前端分页的关键在于理解数据驱动视图的概念，即通过改变Vue实例的数据，自动更新对应的DOM元素。在这个例子中，`indexs`的计算属性会根据`cur`的变化自动更新，从而动态地改变显示的页码列表。 为了实现完整的...
基于bootstrap+jQuery的前端分页
07-01
分页布局会根据设备的宽度自动调整，确保在任何设备上都有良好的用户体验。 5. **数据绑定和动态渲染**：为了将后台获取的数据展示在前端，通常会使用模板引擎或数据绑定机制，如jQuery的`html()`或`append()`方法...
基于LayUI实现前端分页功能的方法
12-11
在前端开发中，分页功能是一项常见的需求，它允许用户以较小的数据量浏览大量数据，提高用户体验。本文将详细介绍如何利用LayUI这个国产前端UI框架实现前端分页功能。 LayUI是一款易于使用的框架，它遵循...
element-ui Pagination分页只保留上一页下一页
一只没有脚的鸟
11-01 1604
有时数据量太大，比如日志数据没必要查看很久之前的，所以把页数屏蔽，不给系统造成卡顿，最简单的方式就是隐藏总条数、页数。
前端JS简单实现分页功能
最新发布
luweimo的博客
02-02 1313
【代码】前端JS简单实现分页功能。
Html div 打印自动分页,真正好用的网页打印和分页方法:CSS+DIV或元素ID
weixin_30413679的博客
06-01 3907
2年前研究过关于网页如何打印的问题http://cz1.me/post/12，当年是使用像素与打印出来的尺寸之间的关系手动换的，并且为了兼顾显示与打印，效果十分有限。幸运的是现在有了新的解决方法，并且相当的完善，几乎可以实现想要的任何效果，那就是使用CSS+DIV或元素ID：页面本身的HTML元素无需修改，通过不同的CSS来指定屏显和打印时候的样式。一、如何实现屏显和打印的区别：通常我们会如下设置...
通用分页详解（前端）
m0_74915426的博客
06-29 5853
首页
前端显示分页详解
一枚数学专业的小码农的博客
12-16 4080
分页保姆级详解
jQuery实现简单分页(jqPaginator插件)
fish的博客
07-27 4034
jQuery实现简单分页(jqPaginator插件)，前后端交互
前台分页html,Web前端 jQuery实现分页功能
weixin_29539581的博客
06-08 323
/p>网页前端开发教程:jq分页.nav {width: 100%;height: 300px;}ul {list-style: none;}ul li {float: left;width: 50px;height: 50px;border: 1px solid #E7EEEF;text-align: center;line-height: 50px;cursor: pointer;mar...
一个优秀的前端jQuery分页插件及教程
AvskBug的博客
10-03 108
通过引入必要的文件、创建分页容器和初始化插件，你可以轻松地在你的网站或应用程序中实现分页功能。同时，你也可以根据自己的需求和设计风格，自定义分页组件的样式和配置参数。本文将介绍一个优秀的jQuery分页插件，并提供相应的教程和源代码，帮助你实现分页功能。简单易用：该插件的使用非常简单，只需在HTML页面中引入相关的CSS和JavaScript文件，并通过简单的配置即可实现分页功能。自定义样式：你可以根据自己的需求和设计风格，自定义分页组件的样式，使其与你的网站或应用程序风格保持一致。
前端实现分页
aoshiyunlong的博客
08-01 2万+
在开发过程中我遇到这么一个需求我曾经遇到过这个需求，后台说数据分页麻烦，哎没办法这个公司就我和他搞技术的，要是有项目经理肯定不允许后台这么搞，无论数据量大不大， 前端采用的是Vue + ElementUi 下面这是父组件的需要代码 <!--html代码--> <template> <paging class="page" :totalCount=...
MyBatis自动分页拦截器实现与配置解析
这些属性提供了与分页相关的所有必要信息，便于在前端进行显示和交互。 MyBatis分页拦截器是提高开发效率和代码复用的有效工具，尤其适用于需要大量分页查询的项目。通过合理的配置和使用，它可以极大地简化分页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值