jQuery DataTables is a powerful and flexible jQuery plugin that enhances HTML tables, providing sorting, filtering, pagination, and many other useful functionalities.
In this tutorial, you will learn how to install and integrate jQuery dataTable in angular 16 applications and display data from web API services.
jQuery dataTable Angular 16 Example Tutorial
Steps to install, integrate jQuery DataTables and display data using web services into an Angular 16 application:
- Step 1 – Set up a New Angular 16 Project
- Step 2 – Install jQuery and DataTables
- Step 3 – Configure jQuery and DataTables
- Step 4 – Import Required Module
- Step 5 – Create DataTable in HTML Template
- Step 6 – Defined the root component
- Step 7 – Run the Application
Step 1 – Set up a New Angular 16 Project
First of all, open your cmd or command prompt and execute the following command on it to install and create a new Angular 16 project using the Angular CLI:
ng new my-new-app
Step 2 – Install jQuery and DataTables
Next, you need to install NPM package called jquery, datatables.net and bootstrap etc to implement datatable in angular app. So, You can install the packages by executing the following commands on the terminal:
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 npm install bootstrap --save
Step 3 – Configure jQuery and DataTables
Next, you need to open angular.json file and add the following code into it:
...
"styles": [
...
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
]
.
Step 4 – Import Required Module
Next, you need to import some required module. So, visit src/app directory and open app.module.ts file. Then add the following code into it:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DataTablesModule } from 'angular-datatables';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DataTablesModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 5 – Create DataTable in HTML Template
Next, you need to create table to display dynamic data in angular app. So, visit src/app/app.component.html and update the following code into it:
<h1>Angular 11 Datatables Example - Tutsmake.com</h1>
<table datatable [dtOptions]="dtOptions" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let post of posts">
<td>{{ post.id }}</td>
<td>{{ post.title }}</td>
<td>{{ post.body }}</td>
</tr>
</tbody>
</table>
Step 6 – Defined the root component
Next, you need to define the root component. So, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'datatables';
dtOptions: DataTables.Settings = {};
posts;
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 5,
processing: true
};
this.http.get('http://jsonplaceholder.typicode.com/posts')
.subscribe(posts => {
this.posts = posts;
});
}
}
Step 7 – Run the Application
Finally, let’s execute the Angular application and see the DataTable in action:
ng serve
Navigate to http://localhost:4200 in your web browser, and you should see the DataTable displaying the sample data with sorting, pagination, and search functionality.
Conclusion
Congratulations! You have successfully integrated jQuery DataTables into an Angular 16 project. You can now use DataTables to create interactive and feature-rich data tables in your Angular applications, providing a more pleasant user experience for data representation and manipulation.
