代码迁移

src/Obj/Element/Pagination.js

@@ -0,0 +1,141 @@
+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 }