基于jquery实现的分页组件

最新推荐文章于 2024-03-15 11:16:49 发布

VIP文章 Pray1122

最新推荐文章于 2024-03-15 11:16:49 发布

阅读量7.9k

点赞数 10

本文链接：https://blog.csdn.net/weixin_40099824/article/details/82872676

版权

分页组件现在在网页中的应用已经变得十分普遍，像我平时经常会去的淘宝和爱奇艺都有用到。

分页的主要用处呢，就是可以分页面去请求数据，不然你像淘宝每个分类有成千上万个商品和店铺，全部请求过来再展示给你的话，那个加载时间可能会让等待的你要自闭了。（不过我算是萌新，如果淘宝不是分页请求的而是其它的方法，那么我自闭了。）

所以这个组件的基本功能或者说要实现的效果大概就是这几个了：

根据选择的页码数请求在数据库中对应页的数据；
选择页码可以选择上一页，下一页，点击某一页或者跳转到某一页；
如果数据量特别大，可能页码数有特别多，那么在一行里不能完全显示，就要只显示第一页和最后一页的页码。然后展示中间的一些页码和两个省略号。

关于jquery实现分页组件，网上有很多的框架可以用，不过既然是框架，使用的时候难免有些限制，所以本着学习新知识的态度，我就踏上了自己写一个分页组件的不归路。网上的框架很少会有对源码的解释，所以我就准备来写这篇blog，一方面让一些跟我一样的小白可以更加了解这个组件的实现，一方面让自己可以从头整理一遍实现这个组件的思路，毕竟一开始写的时候乱糟糟的，如果写着写着能想到怎么优化就更好了。

好了，我们言归正转，首先我们先写出分页组件最后应该是什么样子的。

因为项目的设计要求，在这个长度和每个页码的宽度下，我们最多展示八个页码，当页码数过多时，就将某个位置换成省略号。当然也会包括上一页按钮，下一页按钮，跳转到某页的input框和一个确定按钮。

这个样式的实现想必是没什么难度的，我们在最外层套一个大的div，让这个大的div布局在页面中居中。其中的元素主要分为这么几块，上一页的按钮，一个包含着页码数的div，下一页的按钮，一个input框，一个确定按钮。在包含页码数的div里用flex布局，垂直方向上居中，水平方向上则是space-between,然后每一块都有一个margin-right为10px的属性。（css代码因为较长，这里就不罗列了，因为是静态的，并不是十分复杂）

html代码如下：

 <div class="pagingArea">
    <div class="lastPage" onclick="lastPage()">
      <div class="lastIcon"></div>
    </div>
    <div class="pageDiv" style="display: flex">
      <div class="pageNumber">1</div>
      <div class="pageNumber">2</div>
      <div class="pageNumber">3</div>
      <div class="pageNumber">4</div>
      <div class="pageNumber">5</div>
      <div class="pageNumber">6</div>
      <div class="pageNumber">7</div>
    </div>
    <div class="lastPage" onclick="nextPage()">
      <div class="nextIcon"></div>
    </div>
    <input class="choosePaging" id="pagingInput" />
    <div class="pagingConfirm" onclick="goPage()">确定</div>
  </div>

前文也提到了，我们的分页组件主要分为两类，一类是页码数可以完全显示（即页码比较少的时候），一类则是一行显示不下，需要用到省略号的情况下，我们先来实现前一种，比较简单的，不需要用到省略号的情况（数据总数小于80）。

首先来介绍一下实现逻辑。

因为我们是不知道数据需要分为几页的，所以我们不能设置pagingArea和pageDiv的宽度，这点需要注意，我们只要保证pagingArea在整个页面的X轴上时居中的就可以了。

其次，我们分析可以知道，pageDiv里面的内容是不确定的（因为我们不知道数据将被分成3页还是6页或是几页）。所以我们需要会根据请求到的分页页码数来动态添加。（我们这里默认一页显示十个数据，分页个数的确定就是请求到一个数据总数，然后我们除10，向上取整判断会被分成几页）。

然后我们就可以开始进行分页啦。首先我们设置了三个全局变量。

total:请求到的数据总数； pagingShowNum:用于储存显示出来的页码的数组（即可以被点击，不是在省略号里的页码）；

pageCount:请求第几页的数据，也可以理解成我们点击了分页的第几页；

然后我们会有一个请求函数request() (在实际项目中应该是一个ajax请求，请求到一个数据总数并且赋值给total，这里我们只是为了展示分页的实现，就赋值给total一个48，表示数据总数为48）。

因为pagingShowNum在之后会有改变，所以我们只在pageCount=1时进行赋值。分页的总页数=Math.ceil(total / 10)；因为我们这里先讨论的是页码较少（小于8）的情况，所以判断分页的总数小于8时，给pagingShownNum数组赋值，元素是从1到分页总数。例如我们现在的数据总数total是58，则pagingShowNum这个数组就是[1,2,3,4,5,6];然后我们就执行showPaging()函数，这个函数的作用就是显示分页。

它的原理也比较简单，<div class="pagingArea"></div>这个div里，先通过jquery里的append()方法，加上之前提到的几块内容（上一页的按钮，一个包含页码数字显示的div，下一页的按钮，跳转页码的输入框和确认按钮）。

然后就比较简单了，也是用append()方法，将pagingShowNum数组中的数字循环的添加到包含页码数字的div里，这里我们用到了模板字符串，这里就不做介绍了，如果不知道的朋友可以自己去百度一下。同时我们需要加上id和onclick()方法，这个主要是为了之后选择页面时候使用的，之后会有介绍。这样操作完了以后，body里的代码，就会变成我们之前写的那个静态的写死的页面一样了。

代码如下：（$('.pagingArea').empty();这一句不要忘记加了，不然没执行一次这个函数，就会多一个分页组件了）

<body>
  <div class="pagingArea"> </div>
</body>
<script>
  var total = 0;//请求到的数据总数
  var pagingShowNum = [];//展示的页码数组成的数组
  var pageCount = 1;//请求的页码数
  request();
  function request() {
    total = 58;
    if (pageCount == 1) {
      if (Math.ceil(total / 10) < 8) {
        for (let i = 0; i < Math.ceil(total / 10); i++) {
          pagingShowNum[i] = i + 1;
        }
      }
    }
    showPaging(total);
  }
    function showPaging(total) {
    $('.pagingArea').empty();
    if (Math.ceil(total / 10) <= 8) {
      $('.pagingArea').append(`<div class="lastPage" onclick="lastPage()">

最低0.47元/天解锁文章

Pray1122

关注

10
点赞
踩
29

收藏

觉得还不错? 一键收藏
1
评论
基于jquery实现的分页组件

分页组件现在在网页中的应用已经变得十分普遍，像我平时经常会去的淘宝和爱奇艺都有用到。分页的主要用处呢，就是可以分页面去请求数据，不然你像淘宝每个分类有成千上万个商品和店铺，全部请求过来再展示给你的话，那个加载时间可能会让等待的你要自闭了。（不过我算是萌新，如果淘宝不是分页请求的而是其它的方法，那么我自闭了。）所以这个组件的基本功能或者说要实现的效果大概就是这几个了：根据选择...
复制链接

扫一扫