sdk4.0/src/Obj/Element/Pagination.js

function generatePagination(pagination, total, pageSize, pageIndex, cd) {

  /* 
   需要一个<ul id="pagination"></ul>标签
   total; // 总数据的数量
   pageSize; // 一页显示数量
   pageIndex; // 当前页
  */
  let totalPage = Math.ceil(total / pageSize) || 1; // 总页数
  function initPagination() {
    let pageHtml; // 按钮内容
    let prevButton = `<li class='list-items lbl btnPrev'>‹</li>`; // 向左
    let nextButton = `<li class='list-items lbr btnNext'>›</li>`; // 向右
    let firstPage = `<li class='list-items' pagenumber=1>1</li>`; // 第一页
    let lastPage = `<li class='list-items' pagenumber=${totalPage}>${totalPage}</li>`; // 最后一页
    let leftOmitPage = `<li class='list-items btnGoLeft'>...</li>`; // 省略号
    let rightOmitPage = `<li class='list-items btnGoRight'>...</li>`; // 省略号
    let pageTips = `<div style='line-height:20px;' class='pageTips'>共 ${total} 条</div > `;
    pageHtml = prevButton; // 添加向左的按钮
 
    /* 生成页数 */
    if (totalPage <= 6) {
      // 总页数小于等于10页全部显示
      for (let i = 1; i <= totalPage; i++) {
        pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
      }
    }
 
    //页码大于5页的情况  当前页大于5的话，并且页码是大于11页的
    else if (pageIndex <= 4) {
      //总页数大于10且当前页远离总页数
      for (let i = 1; i <= 5; i++) {
        pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
      }
      pageHtml += rightOmitPage;
      pageHtml += lastPage;
    } else if (pageIndex > totalPage - 3) {
      //pageindex>=9 的时候并且页数》10页的时候
 
      // console.log('totalPage - 2:' + (totalPage - 3));
      // console.log('pageindex:' + pageIndex);
      //总页数大于10且当前页接近总页数
      pageHtml += firstPage;
      pageHtml += leftOmitPage;
      for (let i = totalPage - 4; i <= totalPage; i++) {
        pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
      }
    } else {
      //除开上面两个情况 当前页在中间
      pageHtml += firstPage;
      pageHtml += leftOmitPage;
      for (let i = pageIndex - 1; i <= pageIndex + 1; i++) {
        pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
      }
      pageHtml += rightOmitPage;
      pageHtml += lastPage;
    }
    pageHtml += nextButton; // 添加向右的按钮
    pageHtml += pageTips;
    pagination.innerHTML = pageHtml;
    pagination
      .querySelector("li[pagenumber='" + pageIndex + "']")
      .classList.add('active');
 
    let pagenumberBtns = pagination.querySelectorAll('li[pagenumber]'); // 获取所有的页码按钮
 
    /* 点击页码按钮进行翻页 */
    pagenumberBtns.forEach(function (elements) {
      elements.onclick = function () {
        pageIndex = Number(this.innerHTML); // 当前页
        pagination
          .querySelector("li[pagenumber='" + pageIndex + "']")
          .classList.add('active');
        pageHtml = ``;
        initPagination()
        cd && cd(pageIndex)
      };
    });
 
    /* 向左翻页 */
    pagination.getElementsByClassName('btnPrev')[0].addEventListener('click', function () {
      if (pageIndex > 1) {
        pageIndex--;
        pageHtml = '';
        initPagination();
        cd && cd(pageIndex)
      }
    });
 
    /* 向右翻页 */
    pagination.getElementsByClassName('btnNext')[0].addEventListener('click', function () {
      if (pageIndex < totalPage) {
        pageIndex++;
        pageHtml = '';
        initPagination()
        cd && cd(pageIndex)
      }
    });
 
    /* 向左快速翻页 */
    let btnGoLeft = pagination.getElementsByClassName('btnGoLeft')[0];
    if (btnGoLeft) {
      btnGoLeft.addEventListener('mouseenter', function () {
        this.innerHTML = '<';
      });
      btnGoLeft.addEventListener('mouseleave', function () {
        this.innerHTML = '...';
      });
      btnGoLeft.addEventListener('click', function () {
        if (pageIndex > 10) {
          pageIndex -= 10;
          pageHtml = '';
          initPagination();
          cd && cd(pageIndex)
        }
      });
    }
 
    /* 向右快速翻页 */
    let btnGoRight = pagination.getElementsByClassName('btnGoRight')[0];
    if (btnGoRight) {
      btnGoRight.addEventListener('mouseenter', function () {
        this.innerHTML = '>';
      });
      btnGoRight.addEventListener('mouseleave', function () {
        this.innerHTML = '...';
      });
      btnGoRight.addEventListener('click', function () {
        if (pageIndex < totalPage - 10) {
          pageIndex += 10;
          pageHtml = '';
          initPagination();
          cd && cd(pageIndex)
        }
      });
    }
  }
  initPagination();
}

export { generatePagination }