Angular DataTables Kurulumu

Angular projemize DataTables entegre edeceğiz. Bunu sıkıntısız ve kolay bir şekilde nasıl projemize entegre edeceğiz bundan bahsedeceğim.

Entegre edeceğimiz DataTables’ ın dokümantasyon web sitesi;

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

Bu sitedeki dokumantasyon bazı eksikliklerinden dolayı, DataTables’ ı entegre ettiğimizde düzgün çalışmadığını göreceksiniz. Aşağıdaki adımları takip ettiğinizde DataTables’ ı kolay bir şekilde kurabileceksiniz.

1-) Projemize DataTables yüklenmesi

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 angular versionuna göre datatables yükleriz.

2-) Projemize DataTables entegre edilmesi

Angular.json dosyasına javascript kütüphanelerimizi tanıtacağız.

{
  "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"
            ],
            ...
}

app.module.ts dosyamızda DataTablesModule’ ümüzü import ediyoruz.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataTablesModule } from 'angular-datatables';//DataTablesModule' ümüzü import ediyoruz.
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule   //DataTablesModule' ümüzü import ediyoruz.
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Typescript

Projemizde DataTables kullanacağımız componentin .ts dosyasında aşağıdaki kodları kullanacağız. DataTables ta konfigürasyon yapmak için 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 = {}; //DataTables konfigürasyonu için
//Student listesi çok fazla olabilir.
// Bunun için datanın render edilmeden önce çekildiğinden emin olmak için trigger kullanırız.
  dtTrigger: Subject<any> = new Subject(); 

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

  ngOnInit() {
  // Tüm Student' ları json olarak service kullanarak api'den çekiyoruz.
    this.studentService.getAllStudents()
    .subscribe( 
        data => this.handleResponse(data),       
        error => this.handleError(error)
     );
  }

  handleResponse(data){
      //Manual olarak table'ı  render etmek için DT trigger fonksiyonunu çağırırız. 
      this.dtTrigger.next(); 
      this.students=data;
    }

    handleError(error){   
    }

    ngOnDestroy(): void {
      // Evente unsubscribe olmayı unutmamak gerekiyor.
      this.dtTrigger.unsubscribe();
    }

}

HTML

Data tables tablomuzda datatable ve [dtTrigger]=”dtTrigger”  directive’ lerini kullanırız.

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

Başarılar…