Server Side Pagination using ASP.NET Core and Angular 8 - Part Three

In this article, we will learn how to create server-side paging, which is very useful whenever we have to display a large number of records.

This will come in a total of 3 articles. This article is the last part of it, you can check out the first and second parts by clicking on the below links.

In the second part, we have implemented a previous and next button. Here in this last part, we are sorting our data on click on headings in ascending and descending order.

So here, we are displaying the number of records. With that, it will calculate the number of pages, but in one page we can see only the selected records, so rather than fetching all the records at one time, we are going to fetch records based on pages. This will increase our performance.

In Part 2, we were working on the Prev and Next button and their logic. Here we are sorting the records based on ascending and descending order, so when we click on the header column name it will get the related number of records in order by column name.

We will do the back-end code using the SQL server.

In the first part, we already have created database and tables, so no need to create it again. However, we will make a small change in the stored procedure. So we are sorting the data ascending or descending after we click on table headings on the screen. For that, I am using the case so that it will manipulate records according to column name.

This is a stepwise process where we are going to change some of the code in some files without wasting any time adding components and services.

Let's copy this HTML code and replace it to the pagination.html file. Some change compared to the previous part of the code. Here we are adding a new click event called "sortByHeading". By default, it will fetch the records with company Name in ascending order. If we click that same heading, it will again hit the API and fetch the records in descending order.

Also, I am applying CSS for the heading color, so if you click on a different header, then it will fetch the records based on that header name in ascending order and active color will apply to that particular header.