原生js分页函数

创建分页函数js文件

• 将数据, 页面大小和当前页当做参数传入函数
• 通过每页数据量和数据长度计算页数
• 然后通过创建dom的方式创建分页的html

// 分页函数
const paging = (data, pageSize, pageNum) => {
let page = data.length / pageSize;
let pageDiv = '';
for (let i = 0; i < page; i++) {
 pageDiv += `<div onclick="pagingChange(${pageSize},${i})">${i + 1}</div>`;
}
document.getElementById("pagingId").innerHTML = `
 <div onclick="previous(${pageSize})">上一页</div>
 ${pageDiv}
 <div onclick="nextPage(${pageSize})">下一页</div>
`;
}

使用时的代码

let professionData = [
  {
    id: 0,
    imgUrl: '',
    name: '汽车检测与诊断技术1',
    time: '2019-09-01',
    view: '查看',
    recover: '回复',
  },
  {
    id: 1,
    imgUrl: '',
    name: '汽车检测与诊断技术2',
    time: '2019-09-01',
    view: '查看',
    recover: '回复',
  },
  {
    id: 2,
    imgUrl: '',
    name: '汽车检测与诊断技术3',
    time: '2019-09-01',
    view: '查看',
    recover: '回复',
  },
  {
    id: 2,
    imgUrl: '',
    name: '汽车检测与诊断技术4',
    time: '2019-09-01',
    view: '查看',
    recover: '回复',
  },
]
// 数据获取
const getProfessionData = (val, pageSize, pageNum) => {
  let useData = val.slice(pageSize * pageNum, (pageSize * pageNum) + pageSize);
  let professionStr = '';
  for (let i = 0; i < useData.length; i++) {
    professionStr += `
      <div class="professionList flex-justsb-alignc">
        <div class="professionListTxt" onclick="selectProfessionFn('selectProfession${i}')">${useData[i].name}</div>
      </div>
    `
  }
  document.getElementById("professionBoxId").innerHTML = professionStr;
}
// 当前页数
let pagenums = 0;
// 上一页
const previous = (pageSize) => {
  pagenums === 0 ? pagenums = 0 : pagenums--;
  getProfessionData(professionData, pageSize, pagenums)
}
// 下一页
const nextPage = (pageSize) => {
  let maxPage = Math.floor(professionData.length / pageSize) - 1
  if (pagenums >= maxPage) {

  } else {
    pagenums++
  }
  getProfessionData(professionData, pageSize, pagenums)
}
// 切页
const pagingChange = (pageSize, pageNum) => {
  getProfessionData(professionData, pageSize, pageNum)

}
// 进入页面加载
window.onload = function () {
  document.getElementById('selectProfession0').style.boxShadow = "1px 1px 5px #e3f0fe";
  getProfessionData(professionData, 2, 0)
  paging(professionData, 2, 0)
}