ANGULAR 4 İLE JQUERY DATATABLE KULLANIMI

Merhabalar. Bu yazımda sizlere Angular 4 ile jQuery datatable kullanımından bahsedeceğim. Görünüm olarak jQuery’nin default datatable css i yerine Bootstrap datatable görünümünü kullanacağım. Veri kaynağı olarak daha önceden yazdığım bir RESTful web servisini kullanacağım. Bu servis bana database’imde ki kitap listesini dönmektedir.

Angular 4 ile jQuery datatable kullanmak için evvela aşağıda ki dependencyleri npm ile kurmamız gerekmektedir.

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@3
npm install data-table-angular-4-bootstrap-3 --save

Bütün bu dependencyleri kurduktan sonra projemizde ki angular.cli.json dosyasının içerisinde css ve javascript dosyalarını import etmemiz gerekir. Bu işlem aşağıda ki gibi olur.

.

.

.

"styles": [

 "../node_modules/bootstrap/dist/css/bootstrap.min.css",

 "../node_modules/datatables/media/css/dataTables.bootstrap.min.css",

 "styles.css"

],

"scripts": [

 "../node_modules/jquery/dist/jquery.js",

 "../node_modules/datatables.net/js/jquery.dataTables.js",

 "../node_modules/datatables/media/js/dataTables.bootstrap.min.js"

],

.

.

.

Artık DatatableModule’ü app.module.ts dosyamıza import ederek kodlamaya başlayabiliriz.

import { DataTablesModule } from 'angular-datatables';

.

.

.

imports: [

 BrowserModule,

 FormsModule,

 DataTablesModule,

 BrowserAnimationsModule,

 RouterModule.forRoot(appRoute),

]

.

.

.

data-table.component.ts

import { Component, OnInit } from '@angular/core';

import { Subject } from 'rxjs';

import { Kitap } from '../kitap/kitap';

import { KitapService } from '../kitap/kitap.service';

@Component({

selector: 'app-data-table',

templateUrl: './data-table.component.html',

styleUrls: ['./data-table.component.css'],

providers : [KitapService]

})

export class DataTableComponent implements OnInit {

dtOptions: DataTables.Settings = {};

dtTrigger: Subject<any> = new Subject();

kitaplar:Kitap[] = [];

constructor(private kitapService:KitapService) { }

ngOnInit() {

this.dtOptions = {

 pagingType: 'full_numbers',

 pageLength: 5,

 processing: true,

 language:{

 paginate:{

 first:"İlk",

 last:"Son",

 next:"Sonraki",

 previous:"Önceki"

},

 search:"Ara",

 info:"_TOTAL_ kayıttan _START_ - _END_ arasındaki kayıtlar gösteriliyor"

},

 lengthChange:false

};

this.getKitaplar();

}

getKitaplar(){

 this.kitapService.getKitapListe(undefined).subscribe(p=>

{

 this.kitaplar=p;

 this.dtTrigger.next();

}

);

}

}

data-table.component.html

<h4 class="page-header">Datatable Kullanımı</h4>

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" style="width: 100%"

class="table table-striped table-bordered">

 <thead>

  <tr>

   <th>Kitap Id</th>

   <th>Kitap Adı</th>

   <th>Yazar Adı</th>

   <th>Kitap Türü</th>

   <th>Alınma Tarihi</th>

   <th>Yayınevi</th>

   <th></th>

  </tr>

 </thead>

 <tbody>

  <tr *ngFor="let kitap of kitaplar">

   <td>{{kitap.kitapId}}</td>

   <td>{{kitap.kitapAd}}</td>

   <td>{{kitap.yazarAd}}</td>

   <td>{{kitap.kitapTuru.name | uppercase}}</td>

   <td>{{kitap.alinmaTarihi}}</td>

   <td>{{kitap.yayinEvi.label}}</td>

   <td>

     <button type="button" (click)="kitapDetayAc(kitap)" class="btn btn-       link">Detay</button>

   </td>

  </tr>

 </tbody>

</table>

Çalıştırdığımız takdirde sonuç aşağıda ki gibi olur.

Sorularınızı mesutemrecelenk@gmail.com adresine yazabilirsiniz.Başka bir yazıda görüşmek üzere hoşçakalın.