{"id":255,"date":"2020-11-09T11:26:34","date_gmt":"2020-11-09T08:26:34","guid":{"rendered":"http:\/\/www.etemkeskin.com\/?p=255"},"modified":"2020-11-09T23:02:47","modified_gmt":"2020-11-09T20:02:47","slug":"angular-datatables-installation","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/09\/angular-datatables-installation\/","title":{"rendered":"Angular DataTables Installation"},"content":{"rendered":"\n<p>We will integrate DataTables to our Angular project.  I will explain about how we can integrate it into our project easily and without difficulty.<\/p>\n\n\n\n<p>Documentation website of DataTables, which we will integrate;<\/p>\n\n\n\n<p><a href=\"https:\/\/l-lin.github.io\/angular-datatables\/#\/welcome\">https:\/\/l-lin.github.io\/angular-datatables\/#\/welcome<\/a> <\/p>\n\n\n\n<p>Due to some lack of the documentation on this website,  it does not work properly when we integrate <strong>DataTables.<\/strong> You will be able to install DataTables easily by following the steps below.<\/p>\n\n\n\n<p><strong>1-) Projemize DataTables Installation<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">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<p><code>npm install angular-datatables@6.0.0 --save <\/code><\/p>\n\n\n\n<p>We install datatables according to the angular version.<\/p>\n\n\n\n<p><strong>2-) Projemize DataTables Integration<\/strong><\/p>\n\n\n\n<p>We will add our javascript libraries to the Angular.json file.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\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<p>We import our DataTablesModule in our <strong>app.module.ts<\/strong> file.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { DataTablesModule } from 'angular-datatables';\/\/Import our DataTablesModule.\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    DataTablesModule   \/\/Import our DataTablesModule.\n  ],\n  providers: [],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule {}\n<\/pre>\n\n\n\n<h4>Typescript<\/h4>\n\n\n\n<p>We will use the following codes in the <strong>.ts<\/strong> file of the component where we will use DataTables in our project.<\/p>\n\n\n\n<p> We can use to make DataTables configuration as follows; dtOptions: DataTables.Settings = { <br>pagingType: &#8216;full_numbers&#8217; }; kullanabiliriz.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">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 = {}; \/\/for DataTables configuration\n\/\/Student list can be huge.\n\/\/ for this, we use trigger to make sure the data is pulled before rendering.\n  dtTrigger: Subject&lt;any> = new Subject(); \n\n  students : Student[];\n  constructor(private studentService :HttpStudentService,\n    private router: Router) { }\n\n  ngOnInit() {\n  \/\/ We pull all Students from api using service as json.\n    this.studentService.getAllStudents()\n    .subscribe( \n        data => this.handleResponse(data),       \n        error => this.handleError(error)\n     );\n  }\n\n  handleResponse(data){\n      \/\/We call the DT trigger function to manually to render the table.\n      this.dtTrigger.next(); \n      this.students=data;\n    }\n\n    handleError(error){   \n    }\n\n    ngOnDestroy(): void {\n      \/\/ Don't forget to unsubscribe to event.\n      this.dtTrigger.unsubscribe();\n    }\n\n}\n<\/pre>\n\n\n\n<h4><strong>HTML<\/strong><\/h4>\n\n\n\n<p>We use <em>datatable <\/em>and<em> [dtTrigger]=&#8221;dtTrigger&#8221;&nbsp;&nbsp;<\/em>directives at our DataTable tables. <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;table datatable class=\"row-border hover\" [dtOptions]=\"dtOptions\" [dtTrigger]=\"dtTrigger\" >\n  &lt;thead>\n    &lt;tr>\n      &lt;th>ID&lt;\/th>\n      &lt;th>First name&lt;\/th>\n      &lt;th>Email&lt;\/th>\n      &lt;th>&lt;\/th>\n    &lt;\/tr>\n  &lt;\/thead>\n  &lt;tbody *ngIf=\"students?.length != 0\">\n    &lt;tr *ngFor=\"let item of students\">\n      &lt;td>{{item?.id}}&lt;\/td>\n      &lt;td>{{item?.first_name}}&lt;\/td>\n      &lt;td>{{item?.email}}&lt;\/td>\n      &lt;td>\n        &lt;a [routerLink]=\"['\/student\/', item?.id]\" >&lt;button class=\"btn btn-primary\">&lt;i class=\"fa fa-search\">&lt;\/i>&lt;\/button>&lt;\/a>&lt;\/td>\n    &lt;\/tr>\n  &lt;\/tbody>\n\n  &lt;tbody *ngIf=\"students?.length == 0\">\n      &lt;tr>\n        &lt;td colspan=\"3\" class=\"no-data-available\">No data!&lt;\/td>\n      &lt;\/tr>\n    &lt;tbody>\n&lt;\/table><\/pre>\n\n\n\n<p>Success&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular DataTables Installation - 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\/2020\/11\/09\/angular-datatables-installation\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular DataTables Installation - 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\/2020\/11\/09\/angular-datatables-installation\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-09T08:26:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-09T20:02:47+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\/2020\/11\/09\/angular-datatables-installation\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/09\/angular-datatables-installation\/\",\"name\":\"Angular DataTables Installation - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"datePublished\":\"2020-11-09T08:26:34+00:00\",\"dateModified\":\"2020-11-09T20:02:47+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\/2020\/11\/09\/angular-datatables-installation\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/09\/angular-datatables-installation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/09\/angular-datatables-installation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular DataTables Installation\"}]},{\"@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\/255"}],"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=255"}],"version-history":[{"count":21,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/255\/revisions"}],"predecessor-version":[{"id":348,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/255\/revisions\/348"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}