vue中表格分页功能之切换页码居中效果（学会了至少提升500块身价）

最新推荐文章于 2024-01-12 14:36:03 发布

前端亦可行

最新推荐文章于 2024-01-12 14:36:03 发布

阅读量688

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_68164546/article/details/125311024

版权

该博客介绍了一个用于创建居中显示页码的JavaScript函数。函数根据总页数、每页大小、当前页码及显示按钮数量，动态生成一个页码数组，确保中间页码始终居中。在满足特定条件时，会调整数组长度和页码范围，确保结果合理。示例代码展示了不同场景下的应用，如不同起始页码和显示数量。

摘要由CSDN通过智能技术生成

一·封装一个使页码一直居中的函数

整体思路

先将一个中间页码 push 进一个数组里面，
往这个数组前面使用 unshift 往数组最前面添加一个比中间页码 -1 的数
往这个数组后面使用 pusht 往数组最后面添加一个比中间页码 +1 的数
直到达到所需的数组长度就终止添加

二· 具体代码

function f(total, size, page, btnCount = 5) {
  const num = Math.ceil(total / size)
  const arr = []
  if (btnCount > num) {
    btnCount = num
  }
  if (page > num) {
    page = num
  }
  arr.push(page)
  let qian = page
  let hou = page
  while (arr.length < btnCount) {
    if (qian > 1) {
      arr.unshift(--qian)
      if (hou < num && arr.length < btnCount) {
        arr.push(++hou)
      }
    }
  }
  return arr
}

//测试
/*
f(100, 10, 1,  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]
// 显示第十五页码的时候，因为当前最多只有是10页，所以最多只能显示到第 10 页
f(100, 10, 15 , 5)  // ==> [6, 7, 8, 9, 10]
//的页数只有 1 页  所以数组页只会显示一页
f(100, 100, 1, 5)   // ==> [1]

*/