前端js 分页功能

虽然项目大多数的分页都是在后端做，但有些业务场景不适合在后端做分页，就需要前端的小🉑爱们去实现。

效果

jR7kFWUY1b.gif

实现思路

data：源数据
curPage：当前页（最好从0页开始）
pageSize：一页展示的数据
total：数据总条数

以上信息都已知后，利用数组方法slice，截取当前页需要展示的数据。（以下方法，如果最后一页切换结束后，直接回到第一页）

代码展示

/**
     * setCurrentPageData 前端分页
     * @param {*} data 源数据
     * @param {*} curPage 当前页
     * @param {*} curPageSize
     * @param {*} total 总页码
     */
    setCurrentPageData(data, curPage, pageSize, total) {
      let dataList;
      let begin = curPage * pageSize; // 数组截取开始位置 exp: curPage  = 1， pageSize= 2，则截取位置从下标为2的数据开始截取
      let last = (total - curPage) * pageSize; // exp: 总记录13条时，剩下1条
      if (parseInt(total) === curPage) {
        if (last > 0) { // 这个判断必须要有，防止最后一页数据刚好等于pageSize，会出现一页空白页
          dataList = data.slice(begin, begin + last);
        }
      } else {
        dataList = data.slice(begin, begin + pageSize);
      }
      return dataList;
    },

方法调用

    /**
     * curList 分页后数据
     */
     let res = this.curList(data, curPage,pageSize,total);