2023.11.7每日总结 

<%--
  Created by IntelliJ IDEA.
  User: 王磊
  Date: 2023/5/12
  Time: 16:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="shiyan.student" %>
<%@ page import="shiyan.AllMethods" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="UTF-8">
  <title>Data Table with Pagination</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 800px;
      margin: auto;
      padding: 20px;
    }

    /* 表格样式 */
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      text-align: left;
      padding: 8px;
      border-bottom: 1px solid #ddd;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    th {
      background-color: #4CAF50;
      color: white;
    }

    /* 分页样式 */
    .pagination {
      display: inline-block;
    }

    .pagination a {
      color: black;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
      transition: background-color .3s;
      border: 1px solid #ddd;
      margin: 0 4px;
    }

    .pagination a.active {
      background-color: #4CAF50;
      color: white;
      border: 1px solid #4CAF50;
    }

    .pagination a:hover:not(.active) {
      background-color: #ddd;
    }
    .btn {
      display: inline-block;
      padding: 8px 16px;
      background-color: #4CAF50;
      color: #fff;
      font-size: 16px;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }

    .btn:hover {
      background-color: #3E8E41;
    }

    .btn:active {
      background-color: #3E8E41;
      transform: translateY(1px);
    }
    .my-link {
      color: white;
      text-decoration: none;
      transition: color 0.3s ease-in-out;
    }

    .my-link:hover {
      color: #1E90FF;
    }

  </style>
</head>
<%
AllMethods allMethods=new AllMethods();
student[] students=allMethods.AllStudents();
int i=0;
%>
<body>
<div class="container">
  <h1>学生信息详情页面</h1>
  <a href="add.jsp">添加学生点此处</a>
  <!-- 数据表格 -->
  <table id="myTable">
    <thead>
    <tr>
      <th>学生学号</th>
      <th>学生姓名</th>
      <th>学生性别</th>
      <th>学生生日</th>
      <th>action</th>
    </tr>
    </thead>
    <tbody>
    <%
    for (i=0;i<students.length;i++)
    {%>
    <tr>
      <td><%=students[i].id%></td>
      <td><%=students[i].name%></td>
      <td><%=students[i].sex%></td>
      <td><%=students[i].birthday%></td>
      <td><button class="btn"><a class="my-link" href="edit.jsp?id=<%=students[i].id%>">编辑</a></button><button class="btn"><a class="my-link" href="del.jsp?id=<%=students[i].id%>">删除</a></button></td>
    </tr>
    <%
    }
    %>
    </tbody>
  </table>

  <!-- 分页 -->
  <div class="pagination">
    <a href="#" id="prev">&laquo;</a>
    <a href="#" class="active">1</a>
    <%
      int NumberOfPages=((students.length-4)/5)+1;
      for (int j=0;j<NumberOfPages;j++)
      {
        %>
    <a href="#"><%=1+j+1%></a>
    <%
      }
    %>
    <a href="#" id="next">&raquo;</a>
  </div>
</div>

<script>
  // 获取表格和分页元素
  var table = document.getElementById("myTable");
  var prevBtn = document.getElementById("prev");
  var nextBtn = document.getElementById("next");
  var paginationLinks = document.getElementsByClassName("pagination")[0].getElementsByTagName("a");

  // 每页显示的行数
  var rowsPerPage = 4;

  // 当前页码
  var currentPage = 1;

  // 计算总页数
  var totalRows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
  var totalPages = Math.ceil(totalRows / rowsPerPage);

  // 显示指定页码的表格内容
  function showPage(page) {
    // 计算页码对应的数据行范围
    var startRow = (page - 1) * rowsPerPage;
    var endRow = startRow + rowsPerPage;

    // 显示对应页码的数据行，隐藏其他行
    var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
      if (i >= startRow && i < endRow) {
        rows[i].style.display = "table-row";
      } else {
        rows[i].style.display = "none";
      }
    }

    // 更新分页链接的样式
    for (var j = 0; j < paginationLinks.length; j++) {
      if (j == page) {
        paginationLinks[j].classList.add("active");
      } else {
        paginationLinks[j].classList.remove("active");
      }
    }

    // 更新当前页码
    currentPage = page;

    // 禁用/启用上一页和下一页按钮
    if (currentPage == 1) {
      prevBtn.classList.add("disabled");
    } else {
      prevBtn.classList.remove("disabled");
    }
    if (currentPage == totalPages) {
      nextBtn.classList.add("disabled");
    } else {
      nextBtn.classList.remove("disabled");
    }
  }

  // 初始化显示第一页的表格内容
  showPage(currentPage);

  // 绑定上一页和下一页按钮的点击事件
  prevBtn.addEventListener("click", function (event) {
    event.preventDefault();
    if (currentPage > 1) {
      showPage(currentPage - 1);
    }
  });
  nextBtn.addEventListener("click", function (event) {
    event.preventDefault();
    if (currentPage < totalPages) {
      showPage(currentPage + 1);
    }
  });

  // 绑定分页链接的点击事件
  for (var k = 0; k < paginationLinks.length; k++) {
    paginationLinks[k].addEventListener("click", function (event) {
      event.preventDefault();
      var page = parseInt(this.innerText);
      if (!isNaN(page)) {
        showPage(page);
      }
    });
  }
</script>
</body>
</html>

 

posted @ 2023-11-16 21:57  超爱彬宝同学  阅读(16)  评论(0)    收藏  举报