{"id":349,"date":"2020-11-09T23:05:03","date_gmt":"2020-11-09T20:05:03","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=349"},"modified":"2020-11-09T23:07:19","modified_gmt":"2020-11-09T20:07:19","slug":"angular-datatables-kurulumu","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-datatables-kurulumu\/","title":{"rendered":"Angular DataTables Kurulumu"},"content":{"rendered":"\n

Angular projemize DataTables entegre edece\u011fiz. Bunu s\u0131k\u0131nt\u0131s\u0131z ve kolay bir \u015fekilde nas\u0131l projemize entegre edece\u011fiz bundan bahsedece\u011fim. <\/p>\n\n\n\n

Entegre edece\u011fimiz DataTables’ \u0131n dok\u00fcmantasyon web sitesi;<\/p>\n\n\n\n

https:\/\/l-lin.github.io\/angular-datatables\/#\/welcome<\/a> <\/p>\n\n\n\n

Bu sitedeki dokumantasyon baz\u0131 eksikliklerinden dolay\u0131, DataTables’ \u0131 entegre etti\u011fimizde d\u00fczg\u00fcn \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 g\u00f6receksiniz. A\u015fa\u011f\u0131daki ad\u0131mlar\u0131 takip etti\u011finizde DataTables’ \u0131 kolay bir \u015fekilde kurabileceksiniz.<\/p>\n\n\n\n

1-) Projemize DataTables y\u00fcklenmesi<\/strong><\/p>\n\n\n\n

npm install jquery --save\nnpm install datatables.net --save\nnpm install datatables.net-dt --save\nnpm install angular-datatables@6.0.0 --save\nnpm install @types\/jquery --save-dev\nnpm install @types\/datatables.net --save-dev<\/pre>\n\n\n\n
npm install angular-datatables@6.0.0 –save angular versionuna g\u00f6re datatables y\u00fckleriz.<\/p>\n\n\n\n
2-) Projemize DataTables entegre edilmesi<\/strong><\/p>\n\n\n\n
Angular.json dosyas\u0131na javascript k\u00fct\u00fcphanelerimizi tan\u0131taca\u011f\u0131z.<\/p>\n\n\n\n
{\n  \"projects\": {\n    \"your-app-name\": {\n      \"architect\": {\n        \"build\": {\n          \"options\": {\n            \"styles\": [\n              \"node_modules\/datatables.net-dt\/css\/jquery.dataTables.css\"\n            ],\n            \"scripts\": [\n              \"node_modules\/jquery\/dist\/jquery.js\", \n              \"node_modules\/datatables.net\/js\/jquery.dataTables.js\"\n            ],\n            ...\n}<\/pre>\n\n\n\n
app.module.ts dosyam\u0131zda DataTablesModule’ \u00fcm\u00fcz\u00fc import ediyoruz. <\/p>\n\n\n\n
import { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { DataTablesModule } from 'angular-datatables';\/\/DataTablesModule' \u00fcm\u00fcz\u00fc import ediyoruz.\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    DataTablesModule   \/\/DataTablesModule' \u00fcm\u00fcz\u00fc import ediyoruz.\n  ],\n  providers: [],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule {}\n<\/pre>\n\n\n\n
Typescript<\/h4>\n\n\n\n
Projemizde DataTables kullanaca\u011f\u0131m\u0131z componentin .ts dosyas\u0131nda a\u015fa\u011f\u0131daki kodlar\u0131 kullanaca\u011f\u0131z. DataTables ta konfig\u00fcrasyon yapmak i\u00e7in dtOptions: DataTables.Settings = { 
pagingType: ‘full_numbers’ }; kullanabiliriz.<\/p>\n\n\n\n
import { Component, OnInit, ViewChild, OnDestroy } from '@angular\/core';\nimport { HttpStudentService } from 'src\/app\/Services\/http-coordinator.service';\nimport { Router } from '@angular\/router';\nimport { Student } from '..\/..\/models\/student.model';\nimport { DataTableDirective } from 'angular-datatables';\nimport { Subject } from 'rxjs';\n\n@Component({\n  selector: 'app-c-students',\n  templateUrl: '.\/c-students.component.html',\n  styleUrls: ['.\/c-students.component.css']\n})\nexport class CStudentsComponent implements OnInit, OnDestroy {\n\n  dtOptions: DataTables.Settings = {}; \/\/DataTables konfig\u00fcrasyonu i\u00e7in\n\/\/Student listesi \u00e7ok fazla olabilir.\n\/\/ Bunun i\u00e7in datan\u0131n render edilmeden \u00f6nce \u00e7ekildi\u011finden emin olmak i\u00e7in trigger kullan\u0131r\u0131z.\n  dtTrigger: Subject<any> = new Subject(); \n\n  students : Student[];\n  constructor(private studentService :HttpStudentService,\n    private router: Router) { }\n\n  ngOnInit() {\n  \/\/ T\u00fcm Student' lar\u0131 json olarak service kullanarak api'den \u00e7ekiyoruz.\n    this.studentService.getAllStudents()\n    .subscribe( \n        data => this.handleResponse(data),       \n        error => this.handleError(error)\n     );\n  }\n\n  handleResponse(data){\n      \/\/Manual olarak table'\u0131  render etmek i\u00e7in DT trigger fonksiyonunu \u00e7a\u011f\u0131r\u0131r\u0131z. \n      this.dtTrigger.next(); \n      this.students=data;\n    }\n\n    handleError(error){   \n    }\n\n    ngOnDestroy(): void {\n      \/\/ Evente unsubscribe olmay\u0131 unutmamak gerekiyor.\n      this.dtTrigger.unsubscribe();\n    }\n\n}\n<\/pre>\n\n\n\n
HTML<\/strong><\/h4>\n\n\n\n
Data tables tablomuzda datatable ve [dtTrigger]=”dtTrigger”  <\/em>directive’ lerini kullan\u0131r\u0131z.<\/p>\n\n\n\n
<table datatable class=\"row-border hover\" [dtOptions]=\"dtOptions\" [dtTrigger]=\"dtTrigger\" >\n  <thead>\n    <tr>\n      <th>ID<\/th>\n      <th>First name<\/th>\n      <th>Email<\/th>\n      <th><\/th>\n    <\/tr>\n  <\/thead>\n  <tbody *ngIf=\"students?.length != 0\">\n    <tr *ngFor=\"let item of students\">\n      <td>{{item?.id}}<\/td>\n      <td>{{item?.first_name}}<\/td>\n      <td>{{item?.email}}<\/td>\n      <td>\n        <a [routerLink]=\"['\/student\/', item?.id]\" ><button class=\"btn btn-primary\"><i class=\"fa fa-search\"><\/i><\/button><\/a><\/td>\n    <\/tr>\n  <\/tbody>\n\n  <tbody *ngIf=\"students?.length == 0\">\n      <tr>\n        <td colspan=\"3\" class=\"no-data-available\">No data!<\/td>\n      <\/tr>\n    <tbody>\n<\/table><\/pre>\n\n\n\n
Ba\u015far\u0131lar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Angular projemize DataTables entegre edece\u011fiz. Bunu s\u0131k\u0131nt\u0131s\u0131z ve kolay bir \u015fekilde nas\u0131l projemize entegre edece\u011fiz bundan bahsedece\u011fim. Entegre edece\u011fimiz DataTables’ \u0131n dok\u00fcmantasyon web sitesi; https:\/\/l-lin.github.io\/angular-datatables\/#\/welcome Bu sitedeki dokumantasyon baz\u0131 eksikliklerinden dolay\u0131, DataTables’ \u0131 entegre etti\u011fimizde d\u00fczg\u00fcn \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 g\u00f6receksiniz. A\u015fa\u011f\u0131daki ad\u0131mlar\u0131 takip etti\u011finizde DataTables’ \u0131 kolay bir \u015fekilde kurabileceksiniz. 1-) Projemize DataTables y\u00fcklenmesi npm install angular-datatables@6.0.0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"yoast_head":"\nAngular DataTables Kurulumu - blog website<\/title>\n<meta name=\"description\" content=\"We will integrate DataTables to our Angular 6,7,8 projects. I will explain about how we can integrate it into our project easily and without difficulty.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-datatables-kurulumu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular DataTables Kurulumu - blog website\" \/>\n<meta property=\"og:description\" content=\"We will integrate DataTables to our Angular 6,7,8 projects. I will explain about how we can integrate it into our project easily and without difficulty.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-datatables-kurulumu\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-09T20:05:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-09T20:07:19+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-datatables-kurulumu\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-datatables-kurulumu\/\",\"name\":\"Angular DataTables Kurulumu - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"datePublished\":\"2020-11-09T20:05:03+00:00\",\"dateModified\":\"2020-11-09T20:07:19+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"We will integrate DataTables to our Angular 6,7,8 projects. I will explain about how we can integrate it into our project easily and without difficulty.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-datatables-kurulumu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-datatables-kurulumu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-datatables-kurulumu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular DataTables Kurulumu\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/349"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":1,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/349\/revisions\/350"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}