• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / Search, sort and pagination in Angular 6 and ASP.NET Core

Search, sort and pagination in Angular 6 and ASP.NET Core

July 8, 2018 by mebakar1005 Leave a Comment

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

  • How to set up a project in Angular 6 using ASP.NET Core 2.0
  • Create CRUD operations using Angular 6 and ASP.NET Core 2.0
  • Implement Search functionality in Angular 6 and ASP.NET Core Application
  • Implement Server-Side functionality using Angular 6 and ASP.NET Core
  • How to sort record using Dictionary concept in Angular 6 and ASP.NET Core

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.

See also  How to Create Service in Angular 5

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.

See also  How to deploy Angular 6 and Asp Net Core Application in IIS 8?

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.

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

How to sort record using Angular 6 and ASP.NET Core 2.0
How to Create web API using dot net core with entity framework

Related

Filed Under: Angular, Angular 5, Angular 6, ASP.NET Core Tagged With: .NET Core 2.0, ANGULAR, Angular 6 Tutorial, ANGULAR AND .NET CORE, ASP.NET CORE 2.0, Searching & Pagination

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Realmente Hace Él En absoluto como yo ?
  • Fiscal Planning — What You Need to Know
  • Organization Strategies for Good Business Success
  • Contemporary Business The usage
  • Deciding on a Document Management Program
  • Most Popular Dating Apps For Black Gay – Remanufactured Online Hookup for Gays
Copyright © 2022
x
x