前言

当一个项目中有许多数据需要展示的时候，众所周知一个页面是没有办法放下所有数据的，所以会出现分页的需求。那么分页又会产生什么新的需求呢？如果你也有这样的疑问，那就看看本文内容哦~

一、需求

那么如果分页特别多的时候，我们也不能把所有页码都展示出来，这时候就需要动态的展示当前选中页左右几个就可以了，为了用户更好的体验，尽量让选中的页码居中显示，这样也是极好的。

在可能的情况下，让选中的页码值，在中间显示。

// total: 总条数
// size: 每页几条
// page: 当前第几页
// btnCount: 最多能看到几个按钮

function(){
	const arr = [] //能看到的页码集合
	
	return arr
}

// 在可能的情况下，让page处于正中间
      // f(100, 10, 3, 5) // ==> [1, 2, 3, 4, 5]
      // f(100, 10, 7, 5) // ==> [5, 6, 7, 8, 9]
      // f(100, 10, 2, 5) // ==> [1, 2, 3, 4, 5]
      // f(100, 10, 5, 5) // ==> [3, 4, 5, 6, 7]

二、代码演示

当要展示的页码数组为奇数的时候，才能实现选中页码在中间显示。代码如下（示例）：

 function f(total, size, page, btnCount = 5) {
        // show me your code
        const arr = [] // 能看到的页码集合
        let num = Math.floor(btnCount / 2)

        let totalPage = Math.ceil(total / size) // 拿到总条数
        let leftPage = page - num // 拿到起始数字
        let rightPage = page + num // 拿到结尾数字

        // 判断要展示页码数是否为偶数或者大于总页码数，或者要查看的当前页大于总页码
        if (btnCount % 2 === 0 || btnCount > totalPage || page > totalPage) {
          alert('请检查输入数字是否为奇数或者输入数字大于总页数')
          return
        }

        // 判断左侧数字是否小于等于1
        if (leftPage <= 1) {
          // 从1开始循环到默认要展示的页码数为止
          for (let i = 1; i <= btnCount; i++) {
            arr.push(i)
          }
        } else if (rightPage > totalPage) {
          // 判断右边的数字是否大于总页码数
          // 计算得到左侧起始值，循环到总页码数为止
          for (let i = totalPage - btnCount + 1; i <= totalPage; i++) {
            arr.push(i)
          }
        } else {
          // 左右的数字均在总页码数的安全范围内
          for (let i = leftPage; i <= rightPage; i++) {
            arr.push(i)
          }
        }
        return arr
      }

三、结果展示

为了让大家更直观的看到效果，这里写了一个html页面，模拟了一下分页页面。代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      div {
        margin: 50px auto;
        width: 500px;
        height: 30px;
      }

      .paging {
        display: flex;
        justify-content: center;
      }

      ul {
        list-style: none;
      }

      li {
        float: left;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="form">
      <form action="">
        <select name="total" id="">
          <option value="100">共100条</option>
          <option value="200">共200条</option>
        </select>
        <select name="size" id="">
          <option value="10">10/页</option>
          <option value="20">20/页</option>
          <option value="30">30/页</option>
          <option value="40">40/页</option>
        </select>
        <input type="number" name="page" placeholder="请输入要查看第几页" />
        <input type="number" name="btnCount" value="5" placeholder="请输入默认展示几条数据" />
        <button>确定</button>
      </form>
    </div>
    <div class="paging">
      <ul></ul>
    </div>

    <script src="jquery-3.5.1.min.js"></script>
    <!-- 引入封装好的分页js -->
    <script src="./paging.js"></script>
    <script>
      $('form').on('submit', function (e) {
        // 每一次提交表单，先将ul内的内容清空一次
        $('ul').html('')
        e.preventDefault()
        // 拿到填写的表单数据
        let fd = new FormData(this)
        let total = +fd.get('total')
        let size = +fd.get('size')
        let page = +fd.get('page')
        let btnCount = +fd.get('btnCount')

        let arr = f(total, size, page, btnCount)
        // 循环数组，将li追加到ul中
        arr.forEach(item => {
          $('ul').append(`<li>${item}</li>`)
        })

        // 拿到当前要查看的页码在数组中的索引值，给对应的li给背景色
        let index = arr.findIndex(item => item === page)
        $('li').eq(index).css('backgroundColor', 'skyblue')
      })
    </script>
  </body>
</html>

运行后的结果如下: 在这里插入图片描述

在这里插入图片描述

这里就不做一一演示了，各位小伙伴儿可以复制代码到编辑器运行后，看看效果哦~

总结

js代码虽然功能实现了，但是还有优化的空间，暂时没有想到好的方法，有路过的大佬，指点指点呀~蟹蟹。

自己封装一个分页居中的函数

前言

一、需求

二、代码演示

三、结果展示

总结