0

I am new to Angular and would appreciate if someone could help me add pagination to a table. I created a CRUD project, where the backend was done in Spring boot and the frontend in Angular. To do the layout I would like to use bootstrap directly, without going to create the specific code in springboot for the layout, then work directly in Angular. I've seen some online, but couldn't find a simple thing in my case. This is my html code related to the table of interest:

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

Can anyone kindly help me? I thank you infinitely.

Improve this question
1
  • One option you have to write a logic as dividing your total records by post per page and some other stuffs. 2nd you can use Data Tables which will provide pagination, sorting, live search. Have a look Commented Jun 4, 2021 at 12:18

1 Answer 1

Reset to default
1

Are you planning for client-side pagination or a server-side? This is not clear above!

If client-side: As you're already using Bootstrap Library, I recommend checking this for a quick and easy solution: https://getbootstrap.com/docs/5.0/components/pagination/, but do not use this for a large data set (definition of large ds is debatable, let's say < 3000 records for the fields you mentioned in the code).

If server-side: Spring Boot can't do anything by itself, but the ORM like Hibernate or an ODM for NoSQL databases like MongoDB.

For example: MySQL or PostgreSQL will do the trick with ...offset().limit() whereas MongoDB will do this with ...skip().limit(). You need to create an API with a GET request with parameters (easier to bookmark on the browser). These parameters' number goes inside the above methods to create Pagination. Call this API on click on each page number or when the First, Previous, Next and Last buttons are pressed on the UI!

Please check the respective DB docs for more information.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I was saying directly on the client side. In spring boot it seems more complex, right? I am new, so it is difficult for me. Unfortunately, I don't have a clear idea of which path to take.
For the client side, the link I've provided you from the official documentation will serve the purpose. Just copy-paste the code and follow their short instructions to make it work. If it works for you, please accept this answer or comment if needed more help!🙂

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.