Блог

Может кто-нибудь помочь мне настроить простую разбивку на страницы. Результаты для моей таблицы поступают из запроса GET следующим образом. Я думаю, что разбивка на страницы должна выполняться также внутри fetch .then(результат)

 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>Showamp;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>amp;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>
 

tttttttttttt