如何在Angular中为表格添加分页？

Question

我是 Angular 的新手，如果有人能帮我为表格添加分页，我将不胜感激。 我创建了一个 CRUD 项目，其中后端在 Spring boot 中完成，前端在 Angular 中完成。 要进行布局，我想直接使用 bootstrap，而无需在 springboot 中为布局创建特定代码，然后直接在 Angular 中工作。 我在网上看到了一些，但在我的情况下找不到简单的东西。 这是我与感兴趣的表相关的 html 代码：

<div class="panel-heading">
    <h1 style="text-align: center">Students</h1><br>

    <div class="form-group">
       <input type="text" class="form-control search-input" placeholder="Search..." [(ngModel)]="filterTerm">
    </div>

  <div class="panel-body">
    <table class="table table-hover table-sm">
      <thead class="thead-light">
        <tr>
          <th>Student code</th>
          <th>Student name</th>
          <th>Student date</th>
          <th>Action</th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let student of students| filter:filterTerm">
          <td>{{student.codestudent}}</td>
          <td>{{student.namestudent}}</td>
          <td>{{student.datestudent}}</td>
          <td><button (click)="deleteStudent(student.codestudent)" class='btn btn-primary'><i
                class="fa fa-futboll-0">Delete</i></button>
            </td> 
        </tr>
      </tbody><br>
    </table>
  </div>

谁能帮帮我？我无限感谢你。

Answer 1

您打算使用客户端分页还是服务器端？上面这个不清楚！

如果是客户端：由于您已经在使用 Bootstrap 库，我建议您检查一下，以获得快速简便的解决方案：https://getbootstrap.com/docs/5.0/components/pagination/，但不要将其用于大型数据集（large ds 的定义是有争议的，假设您在代码中提到的字段的< 3000 记录）。

如果服务器端：Spring Boot 不能自己做任何事情，但 ORM 像 Hibernate 或 ODM 用于 NoSQL 数据库像 MongoDB。

例如：MySQL 或 PostgreSQL 将使用 ...offset().limit() 来解决问题，而 MongoDB 将使用 ...skip().limit() 来解决问题。您需要使用parameters 创建一个带有GET 请求的API（更容易在浏览器上添加书签）。这些参数的编号进入上述方法以创建分页。在点击每个页码或在 UI 上按下 First、Previous、Next 和 Last 按钮时调用此 API！

请查看相应的数据库文档以获取更多信息。