时间戳

首页 > 解决方案 > 如何在Angular中为表格添加分页？

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

问题描述

我是 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>

任何人都可以帮助我吗？我无限感谢你。

标签： angularbootstrap-4pagination

解决方案

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

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

如果是服务器端：Spring Boot 自己不能做任何事情，但对于数据库之ORM类的Hibernate或.ODMNoSQLMongoDB

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

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

推荐阅读