原生js自定义分页

美团外卖兼职前端菜鸟

已于 2024-05-22 09:32:29 修改

阅读量348

点赞数 5

文章标签： javascript 前端开发语言

于 2024-05-22 09:30:41 首次发布

本文链接：https://blog.csdn.net/qq_45537145/article/details/139108104

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生js自定义分页</title>
<style>

/* 分页 */
.paging {
  display: flex;
  align-items: center;
  height: 90px;
  background-color: #fff;
  padding: 0 40px;
}

.paging div {
  /* border: 1px solid rgb(211, 211, 211); */
  /* padding: 10px; */
  /* border-radius: 10px; */
  cursor: pointer;
  margin: 0 10px;
  font-size: 14px;
  min-width: 44px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 3px;
  /* color: rgba(255, 255, 255, 0.851); */
  font-family: "Microsoft YaHei";
}

.paging div.disable {
  /* color: #fff; */
  cursor: not-allowed;
  /* background-color: rgb(211, 211, 211); */
  color: rgba(106, 106, 106, 0.851);
}

.paging div.active {
  border: none;
  /* background-color: rgb(78, 216, 250); */
  background-color: rgb(0, 112, 192);
  color: #fff;
}

.last,
.next,
.prev,
.first {
  font-size: 14px;
  font-family: "Microsoft YaHei";
  color: rgba(106, 106, 106, 0.851);
  text-decoration: underline;
  line-height: 2.286;
  text-decoration: underline;

}
</style>


</head>

<body>
  <div class="paging"></div>
  
  <script>
   // ..........
  function Paging (options) {
    let defaultValue = {
      total: 0,
      current: 1,
      firstText: "首页",
      prevText: "上一页",
      nextText: "下一页",
      lastText: "最后一页",
      PageSize: 10,
      PageNum: 5,
      container: document.getElementsByClassName("paging")[0],
    };

    this.options = Object.assign({}, defaultValue, options);
    this.show();
    this.PageClick();
  }

  Paging.prototype.show = function () {
    let disable = "";
    let PageTotalNum = this.getPageTotalNum();
    this.options.container.innerHTML = "";
    if (this.options.current === 1) {
      disable = "disable";
    }
    this.createElement("first " + disable, this.options.firstText);
    this.createElement("prev " + disable, this.options.prevText);

    this.createNumElement();

    disable = "";
    if (this.options.current === PageTotalNum) {
      disable = "disable";
    }
    this.createElement("next " + disable, this.options.nextText);
    this.createElement("last " + disable, this.options.lastText);

    // let span = document.createElement("span");
    // let i = `<i>${this.options.current}</i> /<i>${PageTotalNum}</i>`;
    // span.innerHTML = i;
    // this.options.container.appendChild(span);
  };

  Paging.prototype.createNumElement = function () {
    let min = this.options.current - Math.floor(this.options.PageNum / 2);
    if (min < 1) {
      min = 1;
    }
    let max = min + this.options.PageNum - 1;
    let PageTotalNum = this.getPageTotalNum();
    if (max > PageTotalNum) {
      max = PageTotalNum;
    }
    let active = "";
    for (let i = min; i <= max; i++) {
      if (this.options.current === i) {
        active = "active";
      } else {
        active = "";
      }
      this.createElement("pagingDiv " + active, i);
    }
  };

  Paging.prototype.createElement = function (specialStyle, content) {
    let oDiv = document.createElement("div");
    oDiv.className = specialStyle;
    oDiv.innerText = content;
    this.options.container.appendChild(oDiv);
  };

  Paging.prototype.getPageTotalNum = function () {
    return Math.ceil(this.options.total / this.options.PageSize);
  };

  Paging.prototype.PageClick = function () {
    let _this = this;
    let PageTotalNum = this.getPageTotalNum();
    this.options.container.addEventListener("click", function (e) {
      if (e.target.classList.contains("first")) {
        _this.toPage(1);
      } else if (e.target.classList.contains("prev")) {
        _this.toPage(_this.options.current - 1);
      } else if (e.target.classList.contains("next")) {
        _this.toPage(_this.options.current + 1);
      } else if (e.target.classList.contains("last")) {
        _this.toPage(PageTotalNum);
      } else if (e.target.classList.contains("pagingDiv")) {
        _this.toPage(+e.target.innerText);
      }
    });
  };
  // 分页
  Paging.prototype.toPage = function (page) {
    let PageTotalNum = this.getPageTotalNum();
    if (page < 1) {
      page = 1;
    }
    if (page > PageTotalNum) {
      page = PageTotalNum;
    }
    this.options.current = page;
    this.show();
    console.log(page, "page");
  };

    let paging = new Paging({
      total: 200,
    })
  </script>

</body>

</html>