分页功能（jQuery+bootstrap）

真的想不出名儿

于 2024-02-20 14:18:03 发布

阅读量310

点赞数 1

分类专栏： JavaScript 文章标签： jquery bootstrap 前端

本文链接：https://blog.csdn.net/ioncannontic/article/details/136189217

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述

pagesManage.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
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- jQuery and JavaScript Bundle with Popper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css" />
    <link rel="stylesheet" href="./css/my_alert.css" />
    <link rel="stylesheet" href="./css/pagesManage.css" />
  </head>
  <body>
    <div class="divAll">
      <!-- 面包屑导航 -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">系统设置</a></li>
          <li class="breadcrumb-item active" aria-current="page">
            页面信息管理
          </li>
        </ol>
      </nav>
      <div class="behavior mb-3 ml-3">
        <button class="btn btn-info" onclick="search()">搜索</button>
        <button class="btn btn-primary" onclick="add()">新增</button>
      </div>
      <table class="table">
        <thead>
          <th>序号</th>
          <th>页面名称</th>
          <th>页面路径</th>
          <th>备注</th>
          <th>父级页面</th>
          <th>操作</th>
        </thead>
        <tbody class="tShow"></tbody>
      </table>
      <!-- 分页 -->
      <div class="pager ml-3">
        <select
          name=""
          id=""
          class="form-control mr-2"
          onclick="changePageSize(this)"
        >
          <option value="5">5条/页</option>
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
        </select>
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <!-- <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li> -->
          </ul>
        </nav>
        <label for="" id="currentPageDom" class="mr-3 ml-3"
          >当前第【x】页</label
        >
        <label for="" id="totalCountDom">共【x】条</label>
      </div>
    </div>
    <!-- 警告框 -->
    <div class="my_alert">
      <div class="alert alert-success alert-dismissible" role="alert">
        <button
          type="button"
          class="close"
          data-dismiss="alert"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="msgText">xxxx</div>
      </div>
      <div class="alert alert-danger alert-dismissible" role="alert">
        <button
          type="button"
          class="close"
          data-dismiss="alert"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="msgText">xxxx</div>
      </div>
      <div class="alert alert-warning alert-dismissible" role="alert">
        <button
          type="button"
          class="close"
          data-dismiss="alert"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="msgText">xxxx</div>
      </div>
      <div class="alert alert-info alert-dismissible" role="alert">
        <button
          type="button"
          class="close"
          data-dismiss="alert"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="msgText">xxxx</div>
      </div>
    </div>
    <!-- 模态框 -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="myModalLabel">温馨提示</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">确认要退出吗？</div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              关闭
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="exit()"
              data-dismiss="modal"
            >
              确认退出
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/my_alert.js"></script>
  <script src="./js/pagination.js"></script>
  <script src="./js/pagesManage.js"></script>
  <script>
    window.onload = function () {
      search();
    };
  </script>
</html>

pagesManage.js

var allData;
// 搜索所有页面信息（包含父级）
function search() {
  $.ajax({
    url: "http://localhost:3000/pages/pages_selectAllWithParent",
    success: (res) => {
      allData = res;
      // console.log(res);
      let tr = "";
      res.forEach((element) => {
        tr += `<tr><td>${element.id}</td><td>${element.pageName}</td><td>${element.pageUrl}</td><td>${element.remark}</td><td>${element.parentName}</td><td><button class="btn btn-info mr-2" οnclick="">编辑</button><button class="btn btn-danger mr-2" οnclick="">删除</button></td></tr>`;
      });
      $(".tShow").html(tr);
      // 展示页码
      showLi();
      // 默认选择第一页
      choosePage(1);
    },
  });
}

pagination.js

let pageSize = 5; // 默认页面条数
let currentPage = 1; // 默认当前页
let pageCount = 0; // 总页数

// 改变页面条数
function changePageSize(e) {
  pageSize = $(e).val();
  showLi();
  choosePage(1);
}

// 动态展示页数
function showLi() {
  pageCount =
    allData.length % pageSize == 0
      ? allData.length / pageSize
      : Math.floor(allData.length / pageSize) + 1; // allData为所有数据，通过请求获取到
  $(".pagination").empty();
  var content = `<li class="page-item leftPage"><a href="javascript:leftPage()" class="page-link">&laquo;</a></li>`;
  for (let i = 1; i <= pageCount; i++) {
    content += `<li class="page-item ${
      currentPage === i ? "active" : ""
    }"><a href="javascript:choosePage(${i})" class="page-link" >${i}</a></li>`;
  }
  content += `<li class="page-item rightPage"><a href="javascript:rightPage()" class="page-link">&raquo;</a></li>`;
  $(".pagination").html(content);
}

// 选择不同的页号展示不同数据
function choosePage(i) {
  // 移除当前激活的页码样式
  $(`.page-item.active`).removeClass("active");
  // 移除当前禁用样式
  $(`.page-item.disabled`).removeClass("disabled");
  currentPage = i;
  console.log(currentPage);
  // 为新的当前页码添加激活样式
  $(`.page-item:has(a[href="javascript:choosePage(${i})"])`).addClass("active");
  var startIndex = (currentPage - 1) * pageSize;
  var endIndex =
    currentPage * pageSize < allData.length
      ? currentPage * pageSize - 1
      : allData.length - 1;
  var newData = [];
  for (let i = startIndex; i <= endIndex; i++) {
    newData.push(allData[i]);
    showData(newData);
  }
  // 获取要更新的标签元素
  const currentPageDom = document.getElementById("currentPageDom");
  const totalCountDom = document.getElementById("totalCountDom");
  // 更新标签内容
  currentPageDom.textContent = `当前第${currentPage}页`;
  totalCountDom.textContent = `共${allData.length}条`;
}

function showData(data) {
  $(".tShow").html("");
  var content = ``;
  for (let i = 0; i < data.length; i++) {
    content += `<tr>
        <td>${data[i].id}</td>
        <td>${data[i].pageName}</td>
        <td>${data[i].pageUrl}</td>
        <td>${data[i].remark}</td>
        <td>${data[i].parentName}</td>
        <td>
          <button class="btn btn-info mr-2" οnclick="">编辑</button>
          <button class="btn btn-danger mr-2" οnclick="">删除</button>
        </td>
    </tr>`;
  }
  $(".tShow").html(content);
}

function leftPage() {
  if (currentPage > 1) {
    currentPage--;
    choosePage(currentPage);
    // document.querySelector(".rightPage").classList.remove("disabled");
    $(".rightPage").removeClass("disabled");
  }
  if (currentPage == 1) {
    // document.querySelector(".leftPage").classList.add("disabled");
    $(".leftPage").addClass("disabled");
  }
}

function rightPage() {
  console.log(pageCount, "pageCount");
  if (currentPage < pageCount) {
    currentPage++;
    choosePage(currentPage);
    // document.querySelector(".leftPage").classList.remove("disabled");
    $(".leftPage").removeClass("disabled");
  }
  if (currentPage == pageCount) {
    // document.querySelector(".rightPage").classList.add("disabled");
    $(".rightPage").addClass("disabled");
  }
}