我已经有了来自服务器端rest api的分页。如何在html表中分页

在HTML表中实现分页，可以通过以下步骤来完成：

在HTML页面中创建一个表格元素，可以使用<table>标签来定义表格的结构。
使用JavaScript获取来自服务器端REST API的分页数据。可以使用XMLHttpRequest对象或者fetch API来发送HTTP请求，并获取服务器返回的数据。
解析服务器返回的数据，提取需要展示的数据以及分页相关的信息，例如总记录数、当前页码、每页显示的记录数等。
根据分页信息，计算出总页数，并生成相应的分页导航栏。可以使用<ul>和<li>标签来创建导航栏，每个导航项对应一个页码。
根据当前页码和每页显示的记录数，从数据中提取需要展示的数据，并将其动态地插入到表格中。可以使用JavaScript操作DOM元素来实现动态插入数据。
当用户点击分页导航栏中的页码时，触发相应的事件处理函数。在事件处理函数中，更新当前页码，并重新根据新的页码提取数据并更新表格。

以下是一个示例代码，演示了如何在HTML表中实现分页：

<!DOCTYPE html>
<html>
<head>
  <title>Pagination Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>
  <table id="data-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="data-body"></tbody>
  </table>
  <div id="pagination"></div>

  <script>
    // Simulated data from REST API
    const data = [
      { id: 1, name: "John Doe", email: "john@example.com" },
      { id: 2, name: "Jane Smith", email: "jane@example.com" },
      // ... more data
    ];

    const pageSize = 5; // Number of records to display per page
    let currentPage = 1; // Current page

    function renderTable(page) {
      const tableBody = document.getElementById("data-body");
      tableBody.innerHTML = ""; // Clear existing data

      const startIndex = (page - 1) * pageSize;
      const endIndex = startIndex + pageSize;

      for (let i = startIndex; i < endIndex && i < data.length; i++) {
        const row = document.createElement("tr");
        const rowData = data[i];

        const idCell = document.createElement("td");
        idCell.textContent = rowData.id;
        row.appendChild(idCell);

        const nameCell = document.createElement("td");
        nameCell.textContent = rowData.name;
        row.appendChild(nameCell);

        const emailCell = document.createElement("td");
        emailCell.textContent = rowData.email;
        row.appendChild(emailCell);

        tableBody.appendChild(row);
      }
    }

    function renderPagination() {
      const pagination = document.getElementById("pagination");
      pagination.innerHTML = ""; // Clear existing pagination

      const totalPages = Math.ceil(data.length / pageSize);

      for (let i = 1; i <= totalPages; i++) {
        const pageLink = document.createElement("a");
        pageLink.href = "#";
        pageLink.textContent = i;

        if (i === currentPage) {
          pageLink.style.fontWeight = "bold";
        }

        pageLink.addEventListener("click", () => {
          currentPage = i;
          renderTable(currentPage);
          renderPagination();
        });

        pagination.appendChild(pageLink);
      }
    }

    // Initial rendering
    renderTable(currentPage);
    renderPagination();
  </script>
</body>
</html>

在上述示例代码中，我们使用了一个模拟的数据数组data来代替来自服务器端的REST API数据。你可以根据实际情况替换为从服务器获取的数据。

该示例代码会在页面中创建一个表格，并根据当前页码和每页显示的记录数动态地展示数据。同时，它还会生成一个分页导航栏，用户可以点击不同的页码来切换数据的展示。

请注意，这只是一个简单的示例，实际的分页实现可能需要根据具体需求进行调整和扩展。