Sort Search and Pagination in Angular 6 using ASP.NET Core API

Build an app with ASPNET Core and Angular from scratch

Hi, In this tutorial, we will learn how to add sorting, searching and pagination in an Angular 6 Application using web API in ASP.NET Core. These are the very important concepts in every application. There are lots of ways to add sorting, searching and pagination in Angular 6 application using web API in ASP.NET Core. But in this tutorial, we will use “Angular Datatable” to implement sorting and pagination in Angular 6 application using ASP.NET Core web API.

In the previous tutorial, we have learned how to sort record. In that tutorial, we have implemented the generic logic using Dictionary for sorting the record. If you want to learn, then click here.

So, let’s start in step by step.

Note:- In this tutorial, we will not create a new project, we will add changes that project which we have created in one of the previous tutorials. If you don’t know how to create a new project, then click here.

Previous Tutorials

Step # 1 => Build a Web API

Go to project folder structure => then right click on “Controller” project => then choose a “New C# Class” => then enter the name (E.g. BStore).

Now, enter the code as you see in below file.

Note:- We are using Automapper to map our resource class and domain class. If you don’t know then click here and learn how we created a resource file and added auto mapper in our project.

Let’s understand the above code.

Line # 25: In this line, we are getting all the records from the database.

Line # 26: In this line, we are mapping resource class and domain class and then at the end returning the data.

Step # 2 => Add code for service

As you know we are using service in our project. So, now in this step, we will add code for service. Go to project folder structure => open “bookstoreService” => then add the code as you see in below file.

Note: – don’t forget to import these two below lines above in the service file as you see in above file code.

import { Http } from ‘@angular/http’;

import ‘rxjs/add/operator/map’;

Step # 3 => Code for bookstore-list.component.ts file.

Now, go to bookstore-list.component.ts file => then enter the below code as you see in below file.

Step # 4 => Add front-end code.

Now, in this step, we will add front-end code. So enter the code as you see in below bookstore-list.component.html file.

Step # 5 => Run your project

Now, run your project and you will see all the record as you see in the below screenshot.

Step # 6 => Add Angular Datatable Dependencies

Now, in this step, we will run some commands to add dependencies for Angular Datatables. To do this, just open the VS Code terminal and then add these below dependencies.

npm install jquery –save
npm install datatables.net –save
npm install datatables.net-dt –save
npm install angular-datatables –save
npm install @types/jquery –save-dev
npm install @types/datatables.net –save-dev

Step # 7 => Add dependencies in angular.json or angular-cli.json file.

Now, go to folder structure => then open the angular.json file => then add the below line of codes.

Add this below line in styles area.

“node_modules/datatables.net-dt/css/jquery.dataTables.css”

Now, add these below lines in scripts area.

“node_modules/jquery/dist/jquery.js”,
“node_modules/datatables.net/js/jquery.dataTables.js”

Step # 8 => Import Datatables Module

Now, in this step, we will import datatable module in app.module.ts file. So, go to app.module.ts file and then import the line as you see in below file line # 16 and line # 34.

Step # 9 => Add Component code for Datatable

Now, in this step, we will add some code for the bookstore-list.component.ts file. So, enter the code as you see in below file line #17 and 18, line # 27 to 36.

READ How to create CRUD operations using Angular 6 and ASP.NET Core 2.0

Let’s understand the above code,

Line # 18: In this line, we use this trigger because fetching the list of books can be quite long, thus we ensure the data is fetched before rendering.

Line # 27 to 30: Initializing the data table settings.

Line # 35: In this line, we are calling the datatable trigger to manually render the table.

Step # 10 => Add front-end code for datatable

Now, in this step, we will add a line of code for fron-end. So, go to bookstore-list.component.html file and add this below line in the table tag as you see below.

<table class=”table” datatable [dtOptions]=”dtOptions” [dtTrigger]=”dtTrigger” >

Step # 11 => Run your project

Finally, run your project and then you will see all the result as you see in the below screenshot.

Conclusion

You have learned how to implement sorting, searching and pagination in an Angular 6 application using ASP.NET Core web API. Hope so, this tutorial helped you a lot. Like and share:)