javascript - 在 javascript 中创建简单表分页时出现问题，结果来自获取请求获取

Question

有人可以帮我设置简单的分页。我的表的结果来自像这样的 GET 请求。我认为分页也需要在 fetch .then(result) 内完成

const renderAllUsers = () => {
  let tableBody = document.getElementById("table-body");
  tableBody.innerHTML = "";

  let myHeaders = new Headers();
  myHeaders.append("Authorization", `Bearer ${token}`);

  let requestOptions = {
    method: "GET",
    headers: myHeaders,
    redirect: "follow",
  };

  fetch("/users", requestOptions)
    .then((response) => response.text())
    .then((result) => {
      const res = JSON.parse(result);

      for (const user of res) {
        const tr = document.createElement("tr");
        const content = `
          <td>${user._id}</td>
          <td>${user.firstName}</td>
          <td>${user.email}</td>
          <td>${user.role}</td>
          <td>${user.createdAt.slice(0, 10)}</td>
          <td>${user.updatedAt.slice(0, 10)}</td>`;

        tr.innerHTML = content;
        tableBody.appendChild(tr);
      }
    })
    .catch((error) => console.log("error", error));
};

页码按钮（上一个、当前、下一个） - html 代码

<div class="col-md-6">
 <nav class="d-lg-flex justify-content-lg-end dataTables_paginate paging_simple_numbers">
                      <ul class="pagination">
                        <li class="page-item" id="pagination-prev">
                          <a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
                        </li>
                        <div class="d-lg-flex justify-content-lg-end dataTables_paginate paging_simple_numbers" id="pagination-number-of-pages">
                          <li class="page-item active" id="pagination-1">
                            <a class="page-link" href="#">1</a>
                          </li>
                          <li class="page-item" id="pagination-2">
                            <a class="page-link" href="#">2</a>
                          </li>
                        </div>
                        <li class="page-item" id="pagination-next">
                          <a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>
                        </li>
                      </ul>
 </nav>
</div>

选择显示多少结果的选项 - html 代码

<div id="dataTable_length" class="dataTables_length" aria-controls="dataTable">
 <label>Show&nbsp;
  <select class="form-control form-control-sm custom-select custom-select-sm" id="dataTable_show_number">
                          <option value="5" selected="">5</option>
                          <option value="10">10</option>
                          <option value="20">20</option>
  </select>&nbsp;
 </label>
</div>

表格 html

<table class="table my-0" id="dataTable">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Created</th>
                        <th>Updated</th>
                      </tr>
                    </thead>
                    <tbody id="table-body">
                    </tbody>
                  </table>

滴滴滴滴

标签： javascripthtmlpaginationfetch