Angular DataTables Installation

We will integrate DataTables to our Angular project. I will explain about how we can integrate it into our project easily and without difficulty.

Documentation website of DataTables, which we will integrate;

https://l-lin.github.io/angular-datatables/#/welcome

Due to some lack of the documentation on this website, it does not work properly when we integrate DataTables. You will be able to install DataTables easily by following the steps below.

1-) Projemize DataTables Installation

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

npm install angular-datatables@6.0.0 --save

We install datatables according to the angular version.

2-) Projemize DataTables Integration

We will add our javascript libraries to the Angular.json file.

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js", 
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ],
            ...
}

We import our DataTablesModule in our app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataTablesModule } from 'angular-datatables';//Import our DataTablesModule.
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule   //Import our DataTablesModule.
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Typescript

We will use the following codes in the .ts file of the component where we will use DataTables in our project.

We can use to make DataTables configuration as follows; dtOptions: DataTables.Settings = {
pagingType: ‘full_numbers’ }; kullanabiliriz.

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { HttpStudentService } from 'src/app/Services/http-coordinator.service';
import { Router } from '@angular/router';
import { Student } from '../../models/student.model';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-c-students',
  templateUrl: './c-students.component.html',
  styleUrls: ['./c-students.component.css']
})
export class CStudentsComponent implements OnInit, OnDestroy {

  dtOptions: DataTables.Settings = {}; //for DataTables configuration
//Student list can be huge.
// for this, we use trigger to make sure the data is pulled before rendering.
  dtTrigger: Subject<any> = new Subject(); 

  students : Student[];
  constructor(private studentService :HttpStudentService,
    private router: Router) { }

  ngOnInit() {
  // We pull all Students from api using service as json.
    this.studentService.getAllStudents()
    .subscribe( 
        data => this.handleResponse(data),       
        error => this.handleError(error)
     );
  }

  handleResponse(data){
      //We call the DT trigger function to manually to render the table.
      this.dtTrigger.next(); 
      this.students=data;
    }

    handleError(error){   
    }

    ngOnDestroy(): void {
      // Don't forget to unsubscribe to event.
      this.dtTrigger.unsubscribe();
    }

}

HTML

We use datatable and [dtTrigger]=”dtTrigger”  directives at our DataTable tables.

<table datatable class="row-border hover" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" >
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody *ngIf="students?.length != 0">
    <tr *ngFor="let item of students">
      <td>{{item?.id}}</td>
      <td>{{item?.first_name}}</td>
      <td>{{item?.email}}</td>
      <td>
        <a [routerLink]="['/student/', item?.id]" ><button class="btn btn-primary"><i class="fa fa-search"></i></button></a></td>
    </tr>
  </tbody>

  <tbody *ngIf="students?.length == 0">
      <tr>
        <td colspan="3" class="no-data-available">No data!</td>
      </tr>
    <tbody>
</table>

Success…