Thursday, July 17, 2025
HomeLanguagesAngularAngular 16 jQuery dataTable Example

Angular 16 jQuery dataTable Example

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.

Recommended Angular Posts

Dominic
Dominichttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,
RELATED ARTICLES

Most Popular

Dominic
32143 POSTS0 COMMENTS
Milvus
67 POSTS0 COMMENTS
Nango Kala
6526 POSTS0 COMMENTS
Nicole Veronica
11674 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11729 POSTS0 COMMENTS
Shaida Kate Naidoo
6616 POSTS0 COMMENTS
Ted Musemwa
6893 POSTS0 COMMENTS
Thapelo Manthata
6585 POSTS0 COMMENTS
Umr Jansen
6573 POSTS0 COMMENTS