JS实现分页功能—小白专属

最新推荐文章于 2024-05-11 21:58:00 发布

你的 Alex

最新推荐文章于 2024-05-11 21:58:00 发布

阅读量565

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_46232069/article/details/106862016

版权

分页功能

先给大家看一下我们要实现出来的效果图🎄
在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="pagercontainer"></div>
    <script src="./index.js"></script>

    <script>
      var container = document.getElementById("pagercontainer");
      createPager(2, 100, 10, container);
    </script>
  </body>
</html>

CSS

.pager {
    text-align: center;
}
.pager a {
    border: 1px solid #e1e2e3;
    color: #001ac4;
    height: 34px;
    display: inline-block;
    line-height: 34px;
    padding: 0 12px;
    text-decoration: none;
    margin: 8px;
    cursor: pointer;


}
.pager a.active {   //选中时a标签的样式 
    border: none;
    color: #ff4400;
    cursor: auto;
}
.pager a.disabled {    // 当上一页下一页或者首页尾页到到相应条件时
    color: #cccccc;
    cursor: not-allowed;
}

JS

// **
//  * 创建分页区域
//  * page: 当前页码
//  * pageNumber: 总页数
//  * mostNumber: 中间最多的数字的数量
//  * container: 分页创建好后放到页面中哪个容器中
//  */
function createPager(page, pageNumber, mostNumber, container) {
  // 把之前容器里面的东西清除掉
  container.in/nerHTML = "";

  var divPager = document.createElement("div");
  divPager.className = "pager";
  // 这个函数是用于帮忙创建a元素的
  // className: 类样式
  // text: 内文本
  // newPage: 创建的a元素，点击后，跳到第几页
  function _createAnchor(className, text, newPage) {
    var a = document.createElement("a");
    a.className = className;
    a.innerText = text;
    divPager.appendChild(a);
    a.onclick = function () {
      // 什么情况下不能跳转
      // 1. 新的页码 < 1，  2. 新的页码 > pageNumber  3. 新的页码 = page
      if (newPage < 1 || newPage > pageNumber || newPage === page) {
        return;
      }
      // 重新创建一遍
      createPager(newPage, pageNumber, mostNumber, container);
      // 别的事情
    };
  }
  // 首页和上一页
  if (page === 1) {
    _createAnchor("disabled", "首页", 1);
    _createAnchor("disabled", "上一页", page - 1);
  } else {
    _createAnchor("", "首页", 1);
    _createAnchor("", "上一页", page - 1);
  }

  // 中间的数字（你等着）
  var min = page - mostNumber / 2;
  min = Math.floor(min); // 取整
  if (min < 1) {
    min = 1;
  }
  var max = min + mostNumber - 1;
  if (max > pageNumber) {
    max = pageNumber;
  }

  // 循环生成页码
  for (var i = min; i <= max; i++) {
    if (i === page) {
      _createAnchor("active", i, i);
    } else {
      _createAnchor("", i, i);
    }
  }

  // 尾页和下一页
  if (page === pageNumber) {
    // 最后一页
    _createAnchor("disabled", "下一页", page + 1);
    _createAnchor("disabled", "尾页", pageNumber);
  } else {
    _createAnchor("", "下一页", page + 1);
    _createAnchor("", "尾页", pageNumber);
  }

  // 非常简单的显示当前页码
  var span = document.createElement("span");
  span.innerText = page + " / " + pageNumber;
  divPager.appendChild(span);

  container.appendChild(divPager);
}

代码哪里有问题可以私信我，更多的应用小demo会后续更新的😎

你的 Alex

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JS实现分页功能—小白专属

分页功能先给大家看一下我们要实现出来的效果图????HTML<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title>
复制链接

扫一扫