Server Side Pagination Using ASP.NET Core And Angular 8 - Part Two
In the second part of this tutorial series, we take a look at some of the updated code for creating pagination using Angular 8 and ASP.NET Core.
Join the DZone community and get the full member experience.Join For Free
You may also enjoy: Server Side Pagination using ASP.NET Core and Angular 8
How It Will Work?
Here in the previous article we have already created database and tables so there's no need to create it again. If you don't have the related database, tables, and stored procedure, then please check the previous article.
Complete code of pagination controller:
Let's copy the HTML code and replace it with the pagination.html file. I have made some changes compared to part one, with new buttons to check number of records in one page, so when you click on 10, then 10 records will show on one page.
There are some changes in the CSS file so just replace this code with pagination.component.css file.
Copy the below code and replace the original pagination.component.ts file.
For fetching records per page we are using the
CompaniesPerPage.ts. Create a new class called
CompaniesPerPage.ts and paste the below code.
For getting records from server, a service must be called to connect it with our web API, so just copy the below code and paste it in Api.service.ts file.
This is the most important file, as I have separated the logic from the pagination logic so that it would be very easy to reuse the same code rather than writing it every time.
Copy this below code and replace it with pagination.service.ts file.
With the above steps our coding is done, so now it's time to check the output by using the command
ng serve -o .
Here in these images, we can see that total number of records are 60, but we are displaying only 5 records per page with 12 page buttons total.
Here is how the logic works:
In this article, I have tried to explain how to display the selected number of records per page and next and previous buttons using server-side pagination in Angular 8 and the ASP.NET Web API.
Opinions expressed by DZone contributors are their own.