jq实现分页功能封装

html部分

<body>
    <div id="pageGination"></div>
  </body>

css部分

#pageGination{
    height: 28px;
    width: 500px;
    margin: 50px auto;
    background-color: beige;
    font-size: 12px;
}
#pageGination ul{
    display: flex;
    align-items: center;
}
#pageGination ul li{
    height: 28px;
    width: 28px;
    display: inline-block;
    line-height: 28px;
    text-align: center;
}
#pageGination ul .prePage,#pageGination ul .nextPage{
    width: 56px;
}
#pageGination ul .active{
    background-color: rgb(0, 0, 255);
    color: #fff;
}
#pageGination ul .pageSL{
    line-height: 21px;
}

js部分

function Pagegination(obj) {
  // 定义变量
  this.data = {
    //总共页码
    pageCount: null,
    //添加选中
    addActive: null,
    // 当前下标
    curentIndex: null,
  };
  // 挂载function
  this.currentChange = obj.currentChange;
  // 初始化
  if (obj) {
    this.init(obj);
  }
}
// 初始化
Pagegination.prototype.init = function (obj) {
  // 标记当前this
  const _this = this;
  // 解构
  const { elementId, pageSize, total, prevText, nextText, curentIndex } = obj;
  // 计算页码总数
  _this.data.pageCount = Math.ceil(total / pageSize);
  // 当前页码
  _this.data.curentIndex = curentIndex;
  // 渲染模板方法
  _this.template(elementId, prevText, nextText);
  //页码点击效果
  $(`#${elementId}`).on('click', '.pageNum', function () {
    $(this).addClass('active').siblings().removeClass('active');
    //防止重复点击
    if (_this.data.curentIndex === $(this).data('index')) return;

    _this.data.curentIndex = $(this).data('index');

    typeof _this.currentChange === 'function' &&
      _this.currentChange(_this.data.curentIndex);

    _this.template(elementId, prevText, nextText);
  });
  //上一页
  let curIndex = null;
  $(`#${elementId}`).on('click', '.prePage', function () {
    if (_this.data.curentIndex === 1) return;
    curIndex = --_this.data.curentIndex;
    //判断当前选中页码和下标是否一致
    const _index = $(this)
      .parent()
      .children('.pageNum')
      .eq(curIndex - 1)
      .data('index');

    if (_index !== _this.data.curentIndex) {
      _this.template(elementId, prevText, nextText);
    } else {
      $(this)
        .parent()
        .children('.pageNum')
        .eq(curIndex - 1)
        .addClass('active')
        .siblings()
        .removeClass('active');
    }

    typeof _this.currentChange === 'function' &&
      _this.currentChange(_this.data.curentIndex);

    console.log(_this.data.curentIndex);
  });
  // 下一页
  $(`#${elementId}`).on('click', '.nextPage', function () {
    if (_this.data.curentIndex === _this.data.pageCount) return;

    curIndex = ++_this.data.curentIndex;
    //判断当前选中页码和下标是否一致
    const _index = $(this)
      .parent()
      .children('.pageNum')
      .eq(curIndex - 1)
      .data('index');

    if (_index !== _this.data.curentIndex) {
      _this.template(elementId, prevText, nextText);
    } else {
      $(this)
        .parent()
        .children('.pageNum')
        .eq(curIndex - 1)
        .addClass('active')
        .siblings()
        .removeClass('active');
    }
    typeof _this.currentChange === 'function' &&
      _this.currentChange(_this.data.curentIndex);
    console.log(_this.data.curentIndex);
  });
};
// 渲染模板
Pagegination.prototype.template = function (elementId, prevText, nextText) {
  const _this = this;
  let template = `<ul> <li class="prePage">${prevText}</li>`;
  // 页码总数小于10
  if (_this.data.pageCount < 10) {
    for (let i = 1; i <= _this.data.pageCount; i++) {
      _this.data.addActive = _this.data.curentIndex === i ? 'active' : '';
      template += `<li class="pageNum ${_this.data.addActive} " data-index="${i}">${i}</li>`;
    }
  } else {
    if (_this.data.curentIndex <= 5) {
      const arr = [1, 2, 3, 4, 5, 6, '...', _this.data.pageCount];
      for (let i = 0; i <= arr.length - 1; i++) {
        _this.data.addActive =
          _this.data.curentIndex === arr[i] ? 'active' : '';
        if (arr[i] !== '...') {
          template += `<li class="pageNum ${_this.data.addActive}" data-index="${arr[i]}">${arr[i]}</li>`;
        } else {
          template += `<li class="pageSL">${arr[i]}</li>`;
        }
      }
    } else if (_this.data.curentIndex > _this.data.pageCount - 5) {
      const arr = [
        1,
        '...',
        _this.data.pageCount - 6,
        _this.data.pageCount - 5,
        _this.data.pageCount - 4,
        _this.data.pageCount - 3,
        _this.data.pageCount - 2,
        _this.data.pageCount - 1,
        _this.data.pageCount,
      ];
      for (let i = 0; i <= arr.length - 1; i++) {
        _this.data.addActive =
          _this.data.curentIndex === arr[i] ? 'active' : '';
        if (arr[i] !== '...') {
          template += `<li class="pageNum ${_this.data.addActive}" data-index="${arr[i]}">${arr[i]}</li>`;
        } else {
          template += `<li class="pageSL">${arr[i]}</li>`;
        }
      }
    } else {
      const arr = [
        1,
        '...',
        _this.data.curentIndex - 2,
        _this.data.curentIndex - 1,
        _this.data.curentIndex,
        _this.data.curentIndex + 1,
        _this.data.curentIndex + 2,
        '...',
        _this.data.pageCount,
      ];
      for (let i = 0; i <= arr.length - 1; i++) {
        _this.data.addActive =
          _this.data.curentIndex === arr[i] ? 'active' : '';
        if (arr[i] !== '...') {
          template += `<li class="pageNum ${_this.data.addActive}" data-index="${arr[i]}">${arr[i]}</li>`;
        } else {
          template += `<li class="pageSL">${arr[i]}</li>`;
        }
      }
    }
  }
  template += `<li class="nextPage">${nextText}</li></ul>`;
  $(`#${elementId}`).html(template);
};

js的调用

 new Pagegination({
    elementId: 'pageGination',
    //当前页码
    curentIndex: 1,
    //每页展示数据条数
    pageSize: 10,
    // 展示页码数数量
    pageCount: 5,
    // 总页码
    total: 50,
    prevText: '<上一页',
    nextText: '下一页>',
    currentChange: function (index) {
      console.log(index, '选中的页码');
    },
  });

jq实现分页功能封装

猜你喜欢