js如何实现分页功能

简介: js如何实现分页功能

实现JS分页可以通过以下步骤:

1. 获取数据:从服务器或本地获取数据,并将数据存储在一个数组或对象中。

let shu = [{
    number: 1,
    name: "秦全",
    price: 100,
    deng: "二档二级",
    xue: "初中",
    zhuang: "离职",
    tme: "2000"
  },
  {
    name: "秦泉",
    number: 2,
    price: 200,
    deng: "二档一级",
    xue: "初中",
    zhuang: "在职",
    tme: "2000"
  },
  {
    number: 3,
    name: "秦犬",
    price: 300,
    deng: "二档二级",
    xue: "高中",
    zhuang: "在职",
    tme: "2001"
  },
  {
    name: "秦朝",
    number: 4,
    price: 1900,
    deng: "二档一级",
    xue: "大学",
    zhuang: "在职",
    tme: "1999"
  },
  {
    name: "秦小超",
    number: 5,
    price: 1200,
    deng: "二档一级",
    xue: "高中",
    zhuang: "在职",
    tme: "2000"
  },
  {
    name: "秦秦",
    number: 6,
    price: 2800,
    deng: "二档一级",
    xue: "大专",
    zhuang: "在职",
    tme: "2002"
  },
  {
    name: "秦超菜",
    number: 7,
    price: 1.01,
    deng: "二档二级",
    xue: "初中",
    zhuang: "在职",
    tme: "2001"
  },
  {
    name: "秦沟去",
    number: 8,
    price: 200,
    deng: "二档二级",
    xue: "高中",
    zhuang: "在职",
    tme: "2000"
  },
  {
    name: "秦随篇",
    number: 9,
    price: 1000,
    deng: "二档二级",
    xue: "大学",
    zhuang: "离职",
    tme: "2001"
  },
  {
    name: "秦变",
    number: 10,
    price: 1000,
    deng: "二档二级",
    xue: "大学",
    zhuang: "离职",
    tme: "2001"
  },
  {
    name: "秦够",
    number: 11,
    price: 1000,
    deng: "二档二级",
    xue: "大学",
    zhuang: "离职",
    tme: "2001"
  },
  {
    name: "秦希",
    number: 12,
    price: 1000,
    deng: "二档二级",
    xue: "大学",
    zhuang: "离职",
    tme: "2001"
  }, {
    name: "秦西",
    number: 13,
    price: 1000,
    deng: "二档二级",
    xue: "大学",
    zhuang: "离职",
    tme: "2001"
  },
  {
    name: "秦篇",
    number: 14,
    price: 1000,
    deng: "二档二级",
    xue: "大学",
    zhuang: "离职",
    tme: "2001"
  },
  {
    name: "秦随",
    number: 15,
    price: 1000,
    deng: "二档二级",
    xue: "大学",
    zhuang: "离职",
    tme: "2001"
  },
  {
    name: "秦随",
    number: 15,
    price: 1000,
    deng: "二档二级",
    xue: "大学",
    zhuang: "离职",
    tme: "2001"
  }
]

2. 设置每页显示的数量和当前页码:确定每页要显示的数据数量,以及当前页码。

let num = 0;
let page = 5;
let connt = Math.ceil(shu.length / page);

3. 计算总页数:根据数据的总数和每页显示的数量,计算出总页数。

let connt = Math.ceil(shu.length / page);

4. 显示当前页的数据:根据当前页码和每页显示的数量,从数据数组或对象中提取对应页码的数据。

function renders() {
  let ran = `<span id="iuo"" onclick="hg()" ><</span>`;
  let connt = Math.ceil(shu.length / page);
  for (let i = 0; i < connt; i++) {
    ran += `
    <span class="pu" onclick="qo(${i})"  style="background-color:${num == i ?'pink':'#EEEEEE'}">${i+1}</span>
    `;
  }
  ran += `<span id="iuo""  onclick="wq()" >></span>
  `;
  document.getElementsByClassName("xuan")[0].innerHTML = ran
  tcf()
}

5. 生成分页按钮:根据总页数,生成相应数量的分页按钮,并为每个按钮绑定点击事件。

rt.onchange = function() {
  let sel = document.getElementById("rt")
  let index = sel.selectedIndex;
  let uim = sel.options[index].value;
  console.log(uim);
  page = uim
  num = 0
  render()
}

6. 点击分页按钮更新数据:当用户点击分页按钮时,根据按钮对应的页码更新当前页码,并重新显示当前页的数据。

let qin = document.getElementById('qin');
qin.addEventListener('keyup', function() {
  let connt = Math.ceil(shu.length / page)
  let t = qin.value;
  if (t != '' && t <= connt && t % 1 == 0) {
    qin.onkeypress = function(event) {
      if (event.which === 13) {
        //点击回车要执行的事件
        num = t - 1;
        console.log(num);
        render()
      }
    }
  } else if (t > connt) {
    alert("已经没有更多的页数了")
  } else if (t != 0) {
    alert("不能小于0")
  }
})

以上就是实现分页的办法了

相关文章
|
10天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
10天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
2月前
|
JavaScript 前端开发
js制作九宫格抽奖功能
js制作九宫格抽奖功能
21 0
|
1月前
egg.js 24.13sequelize模型-字段限制排序分页
egg.js 24.13sequelize模型-字段限制排序分页
24 1
egg.js 24.13sequelize模型-字段限制排序分页
|
3天前
|
JavaScript 安全 前端开发
|
9天前
|
JavaScript 前端开发
如何用JS实现选项卡功能
如何用JS实现选项卡功能
12 0
|
10天前
|
存储 前端开发 JavaScript
使用JavaScript实现复杂功能——一个交互式音乐播放器
使用JavaScript实现复杂功能——一个交互式音乐播放器
|
10天前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表
|
18天前
|
JavaScript 前端开发
JavaScript数组的功能内置类型
数组是JavaScript的内置类型,JavaScript数组的功能特别强大。下面简单介绍一下JavaScript数组。
|
30天前
|
JavaScript 前端开发
购物车的功能——JS源码
购物车的功能——JS源码
14 2