From 98f5f7ee710d7c813a90a960f7a31f01270f3df8 Mon Sep 17 00:00:00 2001 From: Surya Teja K Date: Fri, 19 Apr 2024 22:59:56 +0530 Subject: [PATCH] docs: app supports v1 and v2 docs --- .../custom-range-search.component.html | 2 +- .../advanced/custom-range-search.component.ts | 1 + .../app/advanced/dt-instance.component.html | 2 +- .../src/app/advanced/dt-instance.component.ts | 1 + ...individual-column-filtering.component.html | 2 +- .../individual-column-filtering.component.ts | 1 + ...oad-dt-options-with-promise.component.html | 2 +- .../load-dt-options-with-promise.component.ts | 1 + .../advanced/multiple-tables.component.html | 2 +- .../app/advanced/multiple-tables.component.ts | 1 + demo/src/app/advanced/rerender.component.html | 2 +- demo/src/app/advanced/rerender.component.ts | 1 + .../app/advanced/router-link.component.html | 2 +- .../src/app/advanced/router-link.component.ts | 1 + .../advanced/row-click-event.component.html | 2 +- .../app/advanced/row-click-event.component.ts | 1 + .../app/advanced/using-ng-pipe.component.html | 2 +- .../app/advanced/using-ng-pipe.component.ts | 1 + .../using-ng-template-ref.component.html | 2 +- .../using-ng-template-ref.component.ts | 1 + demo/src/app/app.component.css | 13 ++- demo/src/app/app.component.html | 14 +++ demo/src/app/app.component.ts | 28 +++++- demo/src/app/app.module.ts | 3 +- .../src/app/base-demo/base-demo.component.css | 4 + .../app/base-demo/base-demo.component.html | 18 ++-- demo/src/app/base-demo/base-demo.component.ts | 46 +++++---- .../new-server-side.component.html | 2 +- .../new-server-side.component.ts | 1 + .../with-ajax-callback.component.ts | 2 + demo/src/app/basic/with-ajax.component.html | 2 +- demo/src/app/basic/with-ajax.component.ts | 1 + .../src/app/basic/with-options.component.html | 2 +- demo/src/app/basic/with-options.component.ts | 1 + demo/src/app/dt-version.service.ts | 14 +++ .../buttons-extension.component.html | 3 +- .../extensions/buttons-extension.component.ts | 2 +- .../colreorder-extension.component.html | 3 +- .../colreorder-extension.component.ts | 1 + .../fixed-columns-extension.component.html | 3 +- .../fixed-columns-extension.component.ts | 2 +- .../responsive-extension.component.html | 3 +- .../responsive-extension.component.ts | 1 + .../select-extension.component.html | 3 +- .../extensions/select-extension.component.ts | 1 + .../advanced/custom-range/source-ts-dtv2.md | 64 +++++++++++++ .../advanced/dt-instance/source-ts-dtv2.md | 39 ++++++++ .../indi-col-filter/source-ts-dtv2.md | 50 ++++++++++ .../source-ts-dtv2.md | 27 ++++++ .../multiple-tables/source-ts-dtv2.md | 47 +++++++++ .../docs/advanced/rerender/source-ts-dtv2.md | 55 +++++++++++ .../advanced/router-link/source-ts-dtv2.md | 72 ++++++++++++++ .../docs/advanced/router-link/source-ts.md | 6 +- .../advanced/router-link/source-tsHigh.md | 43 --------- .../docs/advanced/row-click/source-ts-dtv2.md | 49 ++++++++++ .../advanced/using-ng-pipe/source-ts-dtv2.md | 47 +++++++++ .../basic/new-server-side/source-ts-dtv2.md | 42 ++++++++ .../with-ajax-callback/source-ts-dtv2.md | 49 ++++++++++ .../docs/basic/with-ajax/source-ts-dtv2.md | 29 ++++++ .../docs/basic/with-options/source-ts-dtv2.md | 20 ++++ .../docs/extensions/buttons/source-ts-dtv2.md | 53 +++++++++++ .../extensions/colreorder/source-ts-dtv2.md | 36 +++++++ .../extensions/fixedcolumns/source-ts-dtv2.md | 95 +++++++++++++++++++ .../extensions/responsive/source-ts-dtv2.md | 33 +++++++ .../docs/extensions/select/source-ts-dtv2.md | 32 +++++++ demo/src/styles.css | 18 +++- 66 files changed, 1009 insertions(+), 100 deletions(-) create mode 100644 demo/src/app/dt-version.service.ts create mode 100644 demo/src/assets/docs/advanced/custom-range/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/advanced/dt-instance/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/advanced/indi-col-filter/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/advanced/load-dt-opt-with-promise/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/advanced/multiple-tables/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/advanced/rerender/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/advanced/router-link/source-ts-dtv2.md delete mode 100644 demo/src/assets/docs/advanced/router-link/source-tsHigh.md create mode 100644 demo/src/assets/docs/advanced/row-click/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/advanced/using-ng-pipe/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/basic/new-server-side/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/basic/with-ajax-callback/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/basic/with-ajax/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/basic/with-options/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/extensions/buttons/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/extensions/colreorder/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/extensions/fixedcolumns/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/extensions/responsive/source-ts-dtv2.md create mode 100644 demo/src/assets/docs/extensions/select/source-ts-dtv2.md diff --git a/demo/src/app/advanced/custom-range-search.component.html b/demo/src/app/advanced/custom-range-search.component.html index 60ec133e..50527e88 100644 --- a/demo/src/app/advanced/custom-range-search.component.html +++ b/demo/src/app/advanced/custom-range-search.component.html @@ -13,5 +13,5 @@
- + diff --git a/demo/src/app/advanced/custom-range-search.component.ts b/demo/src/app/advanced/custom-range-search.component.ts index b023197f..84ccb3cb 100644 --- a/demo/src/app/advanced/custom-range-search.component.ts +++ b/demo/src/app/advanced/custom-range-search.component.ts @@ -14,6 +14,7 @@ export class CustomRangeSearchComponent implements OnDestroy, OnInit { mdIntro = 'assets/docs/advanced/custom-range/intro.md'; mdHTML = 'assets/docs/advanced/custom-range/source-html.md'; mdTS = 'assets/docs/advanced/custom-range/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/custom-range/source-ts-dtv2.md'; @ViewChild(DataTableDirective, {static: false}) datatableElement: DataTableDirective; diff --git a/demo/src/app/advanced/dt-instance.component.html b/demo/src/app/advanced/dt-instance.component.html index 558b93f7..45ccaf1e 100644 --- a/demo/src/app/advanced/dt-instance.component.html +++ b/demo/src/app/advanced/dt-instance.component.html @@ -9,5 +9,5 @@
- + diff --git a/demo/src/app/advanced/dt-instance.component.ts b/demo/src/app/advanced/dt-instance.component.ts index 312c874f..355d529b 100644 --- a/demo/src/app/advanced/dt-instance.component.ts +++ b/demo/src/app/advanced/dt-instance.component.ts @@ -13,6 +13,7 @@ export class DtInstanceComponent implements OnInit { mdIntro = 'assets/docs/advanced/dt-instance/intro.md'; mdHTML = 'assets/docs/advanced/dt-instance/source-html.md'; mdTS = 'assets/docs/advanced/dt-instance/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/dt-instance/source-ts-dtv2.md'; @ViewChild(DataTableDirective, {static: false}) datatableElement: DataTableDirective; diff --git a/demo/src/app/advanced/individual-column-filtering.component.html b/demo/src/app/advanced/individual-column-filtering.component.html index fb29035d..7b9dec79 100644 --- a/demo/src/app/advanced/individual-column-filtering.component.html +++ b/demo/src/app/advanced/individual-column-filtering.component.html @@ -9,5 +9,5 @@ - + diff --git a/demo/src/app/advanced/individual-column-filtering.component.ts b/demo/src/app/advanced/individual-column-filtering.component.ts index 16eaa611..b79dcb6c 100644 --- a/demo/src/app/advanced/individual-column-filtering.component.ts +++ b/demo/src/app/advanced/individual-column-filtering.component.ts @@ -13,6 +13,7 @@ export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit mdIntro = 'assets/docs/advanced/indi-col-filter/intro.md'; mdHTML = 'assets/docs/advanced/indi-col-filter/source-html.md'; mdTS = 'assets/docs/advanced/indi-col-filter/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/indi-col-filter/source-ts-dtv2.md'; @ViewChild(DataTableDirective, {static: false}) datatableElement: DataTableDirective; diff --git a/demo/src/app/advanced/load-dt-options-with-promise.component.html b/demo/src/app/advanced/load-dt-options-with-promise.component.html index 383bd373..69d1b437 100644 --- a/demo/src/app/advanced/load-dt-options-with-promise.component.html +++ b/demo/src/app/advanced/load-dt-options-with-promise.component.html @@ -1,5 +1,5 @@
- + diff --git a/demo/src/app/advanced/load-dt-options-with-promise.component.ts b/demo/src/app/advanced/load-dt-options-with-promise.component.ts index c2bb2820..384295bb 100644 --- a/demo/src/app/advanced/load-dt-options-with-promise.component.ts +++ b/demo/src/app/advanced/load-dt-options-with-promise.component.ts @@ -12,6 +12,7 @@ export class LoadDtOptionsWithPromiseComponent implements OnInit { mdIntro = 'assets/docs/advanced/load-dt-opt-with-promise/intro.md'; mdHTML = 'assets/docs/advanced/load-dt-opt-with-promise/source-html.md'; mdTS = 'assets/docs/advanced/load-dt-opt-with-promise/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/load-dt-opt-with-promise/source-ts-dtv2.md'; dtOptions: Promise; diff --git a/demo/src/app/advanced/multiple-tables.component.html b/demo/src/app/advanced/multiple-tables.component.html index bdb4644f..388c0ec9 100644 --- a/demo/src/app/advanced/multiple-tables.component.html +++ b/demo/src/app/advanced/multiple-tables.component.html @@ -11,5 +11,5 @@
Table 2
- + diff --git a/demo/src/app/advanced/multiple-tables.component.ts b/demo/src/app/advanced/multiple-tables.component.ts index 1b6d70a7..65d0c6b8 100644 --- a/demo/src/app/advanced/multiple-tables.component.ts +++ b/demo/src/app/advanced/multiple-tables.component.ts @@ -12,6 +12,7 @@ export class MultipleTablesComponent implements OnInit { mdIntro = 'assets/docs/advanced/multiple-tables/intro.md'; mdHTML = 'assets/docs/advanced/multiple-tables/source-html.md'; mdTS = 'assets/docs/advanced/multiple-tables/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/multiple-tables/source-ts-dtv2.md'; @ViewChildren(DataTableDirective) dtElements: QueryList; diff --git a/demo/src/app/advanced/rerender.component.html b/demo/src/app/advanced/rerender.component.html index f7a78923..e5d4a4cd 100644 --- a/demo/src/app/advanced/rerender.component.html +++ b/demo/src/app/advanced/rerender.component.html @@ -6,5 +6,5 @@

- + diff --git a/demo/src/app/advanced/rerender.component.ts b/demo/src/app/advanced/rerender.component.ts index 34d7820c..8101a267 100644 --- a/demo/src/app/advanced/rerender.component.ts +++ b/demo/src/app/advanced/rerender.component.ts @@ -13,6 +13,7 @@ export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit { mdIntro = 'assets/docs/advanced/rerender/intro.md'; mdHTML = 'assets/docs/advanced/rerender/source-html.md'; mdTS = 'assets/docs/advanced/rerender/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/rerender/source-ts-dtv2.md'; @ViewChild(DataTableDirective, {static: false}) diff --git a/demo/src/app/advanced/router-link.component.html b/demo/src/app/advanced/router-link.component.html index e01f116c..3684de8f 100644 --- a/demo/src/app/advanced/router-link.component.html +++ b/demo/src/app/advanced/router-link.component.html @@ -6,5 +6,5 @@ - + diff --git a/demo/src/app/advanced/router-link.component.ts b/demo/src/app/advanced/router-link.component.ts index 8f50e67c..1182b7be 100644 --- a/demo/src/app/advanced/router-link.component.ts +++ b/demo/src/app/advanced/router-link.component.ts @@ -15,6 +15,7 @@ export class RouterLinkComponent implements AfterViewInit, OnInit, OnDestroy { mdIntro = 'assets/docs/advanced/router-link/intro.md'; mdHTML = 'assets/docs/advanced/router-link/source-html.md'; mdTS = 'assets/docs/advanced/router-link/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/router-link/source-ts-dtv2.md'; mdTSHeading = 'TypeScript'; dtOptions: ADTSettings = {}; diff --git a/demo/src/app/advanced/row-click-event.component.html b/demo/src/app/advanced/row-click-event.component.html index af117c17..b70a802e 100644 --- a/demo/src/app/advanced/row-click-event.component.html +++ b/demo/src/app/advanced/row-click-event.component.html @@ -4,5 +4,5 @@
- + diff --git a/demo/src/app/advanced/row-click-event.component.ts b/demo/src/app/advanced/row-click-event.component.ts index 4d10acd1..c54d1e7f 100644 --- a/demo/src/app/advanced/row-click-event.component.ts +++ b/demo/src/app/advanced/row-click-event.component.ts @@ -11,6 +11,7 @@ export class RowClickEventComponent implements OnInit { mdIntro = 'assets/docs/advanced/row-click/intro.md'; mdHTML = 'assets/docs/advanced/row-click/source-html.md'; mdTS = 'assets/docs/advanced/row-click/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/row-click/source-ts-dtv2.md'; message = ''; dtOptions: Config = {}; diff --git a/demo/src/app/advanced/using-ng-pipe.component.html b/demo/src/app/advanced/using-ng-pipe.component.html index 8ad7b16f..b761c184 100644 --- a/demo/src/app/advanced/using-ng-pipe.component.html +++ b/demo/src/app/advanced/using-ng-pipe.component.html @@ -1,5 +1,5 @@
- + diff --git a/demo/src/app/advanced/using-ng-pipe.component.ts b/demo/src/app/advanced/using-ng-pipe.component.ts index d6d2e2fb..f5353fa4 100644 --- a/demo/src/app/advanced/using-ng-pipe.component.ts +++ b/demo/src/app/advanced/using-ng-pipe.component.ts @@ -17,6 +17,7 @@ export class UsingNgPipeComponent implements OnInit { mdIntro = 'assets/docs/advanced/using-ng-pipe/intro.md'; mdHTML = 'assets/docs/advanced/using-ng-pipe/source-html.md'; mdTS = 'assets/docs/advanced/using-ng-pipe/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/using-ng-pipe/source-ts-dtv2.md'; dtOptions: ADTSettings = {}; diff --git a/demo/src/app/advanced/using-ng-template-ref.component.html b/demo/src/app/advanced/using-ng-template-ref.component.html index cead8dae..13fb6f86 100644 --- a/demo/src/app/advanced/using-ng-template-ref.component.html +++ b/demo/src/app/advanced/using-ng-template-ref.component.html @@ -4,7 +4,7 @@
- + diff --git a/demo/src/app/advanced/using-ng-template-ref.component.ts b/demo/src/app/advanced/using-ng-template-ref.component.ts index c0af8218..efea83b6 100644 --- a/demo/src/app/advanced/using-ng-template-ref.component.ts +++ b/demo/src/app/advanced/using-ng-template-ref.component.ts @@ -16,6 +16,7 @@ export class UsingNgTemplateRefComponent implements OnInit, AfterViewInit { mdIntro = 'assets/docs/advanced/using-ng-template-ref/intro.md'; mdHTML = 'assets/docs/advanced/using-ng-template-ref/source-html.md'; mdTS = 'assets/docs/advanced/using-ng-template-ref/source-ts.md'; + mdTSV2 = 'assets/docs/advanced/using-ng-template-ref/source-ts-dtv2.md'; dtOptions: ADTSettings = {}; dtTrigger: Subject = new Subject(); diff --git a/demo/src/app/app.component.css b/demo/src/app/app.component.css index b941cdf8..b1ba4c11 100644 --- a/demo/src/app/app.component.css +++ b/demo/src/app/app.component.css @@ -11,7 +11,7 @@ header .container a { .plus { font-size: 35px; position: relative; - top: 3vh; + top: -2vh; } ul.side-nav.fixed ul.collapsible-accordion a.collapsible-header { @@ -74,3 +74,14 @@ ul.side-nav.fixed ul.collapsible-accordion .collapsible-body li a { #logo-container { display: block; } + + +.dt-version-button { + text-transform: none; + text-align: center; +} + +.dt-version-button svg { + position: relative; + top: 6px; +} diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html index d1bb6053..de74074d 100644 --- a/demo/src/app/app.component.html +++ b/demo/src/app/app.component.html @@ -17,6 +17,20 @@

+
  • + + DT version: '{{dtVersion}}' + + + +
      +
    • v2.x
      • +
    • v1.x
      • +
    +
    • +
  • +
    +
  • Getting Started
  • Installation diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts index 6865f328..bfe7f87c 100644 --- a/demo/src/app/app.component.ts +++ b/demo/src/app/app.component.ts @@ -1,6 +1,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; import { filter, Subscription } from 'rxjs'; +import { DtVersionService } from './dt-version.service'; declare var $: any; @@ -13,9 +14,14 @@ export class AppComponent implements OnInit, OnDestroy { routerEventsSub$: Subscription = null; + dtVersion: 'v2' | 'v1' = null; + constructor( - private router: Router - ) {} + private router: Router, + private dtVersionService: DtVersionService + ) { + this.dtVersion = dtVersionService.dtVersion; + } ngOnInit(): void { $.fn.dataTable.ext.errMode = 'none'; @@ -31,6 +37,24 @@ export class AppComponent implements OnInit, OnDestroy { $('ul.tabs').tabs(); }, 600); }); + + // Init DT version picker + $('.dt-version-button').dropdown({ + inDuration: 300, + outDuration: 225, + constrainWidth: true, // Does not change width of dropdown to that of the activator + hover: false, // Activate on hover + gutter: 14, + belowOrigin: true, + alignment: 'left', // Displays dropdown with edge aligned to the left of button + stopPropagation: true // Stops event propagation + }); + + } + + onDTVersionChanged(v: 'v2'|'v1') { + this.dtVersion = v; + this.dtVersionService.versionChanged$.next(v); } ngOnDestroy(): void { diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts index a9fdd394..32bb4836 100644 --- a/demo/src/app/app.module.ts +++ b/demo/src/app/app.module.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule, SecurityContext } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { DataTablesModule } from 'angular-datatables'; @@ -90,6 +90,7 @@ import { NewServerSideComponent } from './basic/new-server-side/new-server-side. CommonModule, BrowserModule, FormsModule, + ReactiveFormsModule, HttpClientModule, DataTablesModule, AppRoutingModule, diff --git a/demo/src/app/base-demo/base-demo.component.css b/demo/src/app/base-demo/base-demo.component.css index 8912e693..a30c98e1 100644 --- a/demo/src/app/base-demo/base-demo.component.css +++ b/demo/src/app/base-demo/base-demo.component.css @@ -26,3 +26,7 @@ #toTop .material-icons { vertical-align: middle; } + +.dtv1-notice { + padding: 10px; +} diff --git a/demo/src/app/base-demo/base-demo.component.html b/demo/src/app/base-demo/base-demo.component.html index 4f56b787..2a2743e1 100644 --- a/demo/src/app/base-demo/base-demo.component.html +++ b/demo/src/app/base-demo/base-demo.component.html @@ -16,6 +16,12 @@

    {{pageTitle}}

    +
    +
    + You are viewing documentation for v1.x of datatables.net. This version is not supported anymore. It is listed here for documentation purposes only. +
    +
    +
    Description
    @@ -30,7 +36,7 @@
    Description
  • Preview
    • -
  • +
  • Installation
  • @@ -43,22 +49,22 @@
    Description
    -
    +
    -
    - +
    +
    - +
    - +
    diff --git a/demo/src/app/base-demo/base-demo.component.ts b/demo/src/app/base-demo/base-demo.component.ts index 0a24f218..3b10b626 100644 --- a/demo/src/app/base-demo/base-demo.component.ts +++ b/demo/src/app/base-demo/base-demo.component.ts @@ -1,4 +1,6 @@ -import { Component, Input, OnInit, TemplateRef } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core'; +import { DtVersionService } from '../dt-version.service'; +import { Subscription } from 'rxjs'; // needed to re-init tabs on route change declare var $: JQueryStatic; @@ -8,34 +10,42 @@ declare var $: JQueryStatic; templateUrl: './base-demo.component.html', styleUrls: ['./base-demo.component.css'] }) -export class BaseDemoComponent implements OnInit { +export class BaseDemoComponent implements OnInit, OnDestroy { - @Input() - pageTitle = ''; + @Input() pageTitle = ''; - @Input() - mdIntro = ''; + @Input() mdIntro = ''; - @Input() - mdInstall = ''; + @Input() mdInstall = ''; + @Input() mdInstallV2 = ''; - @Input() - mdHTML = ''; + @Input() mdHTML = ''; + @Input() mdHTMLV2 = ''; - @Input() - mdTS = ''; + @Input() mdTS = ''; + @Input() mdTSV2 = ''; - @Input() - template: TemplateRef = null; + @Input() template: TemplateRef = null; - @Input() - deprecated = false; + @Input() deprecated = false; + + dtVersion = null; + dtVersionSubscription$: Subscription = null; + + constructor( + private dtVersionService: DtVersionService + ) {} ngOnInit() { // Re-init tabs on route change // Init back to top this.initBackToTop(); + + this.dtVersionSubscription$ = this.dtVersionService.versionChanged$.subscribe(v => { + console.log('dt version changed', v); + this.dtVersion = v; + }); } private scrollCallback() { @@ -57,4 +67,8 @@ export class BaseDemoComponent implements OnInit { }); } + ngOnDestroy(): void { + this.dtVersionSubscription$?.unsubscribe(); + } + } diff --git a/demo/src/app/basic/new-server-side/new-server-side.component.html b/demo/src/app/basic/new-server-side/new-server-side.component.html index 04d7e560..c032f2ed 100644 --- a/demo/src/app/basic/new-server-side/new-server-side.component.html +++ b/demo/src/app/basic/new-server-side/new-server-side.component.html @@ -3,5 +3,5 @@

    No preview as we do not have a server that can serve the queries.

    - + diff --git a/demo/src/app/basic/new-server-side/new-server-side.component.ts b/demo/src/app/basic/new-server-side/new-server-side.component.ts index bdf9b9a8..79109f26 100644 --- a/demo/src/app/basic/new-server-side/new-server-side.component.ts +++ b/demo/src/app/basic/new-server-side/new-server-side.component.ts @@ -11,6 +11,7 @@ export class NewServerSideComponent { mdIntro = "assets/docs/basic/new-server-side/intro.md"; mdHTML = "assets/docs/basic/new-server-side/source-html.md"; mdTS = "assets/docs/basic/new-server-side/source-ts.md"; + mdTSV2 = "assets/docs/basic/new-server-side/source-ts-dtv2.md"; dtOptions: Config = {}; } diff --git a/demo/src/app/basic/with-ajax-callback/with-ajax-callback.component.ts b/demo/src/app/basic/with-ajax-callback/with-ajax-callback.component.ts index 13f87d6a..4978c009 100644 --- a/demo/src/app/basic/with-ajax-callback/with-ajax-callback.component.ts +++ b/demo/src/app/basic/with-ajax-callback/with-ajax-callback.component.ts @@ -16,7 +16,9 @@ export class WithAjaxCallbackComponent implements OnInit { pageTitle = 'AJAX with callback'; mdIntro = 'assets/docs/basic/with-ajax-callback/intro.md'; mdHTML = 'assets/docs/basic/with-ajax-callback/source-html.md'; + mdHTMLV2 = 'assets/docs/basic/with-ajax-callback/source-html-dtv2.md'; mdTS = 'assets/docs/basic/with-ajax-callback/source-ts.md'; + mdTSV2 = 'assets/docs/basic/with-ajax-callback/source-ts-dtv2.md'; dtOptions: Config = {}; diff --git a/demo/src/app/basic/with-ajax.component.html b/demo/src/app/basic/with-ajax.component.html index 8ad7b16f..7767726a 100644 --- a/demo/src/app/basic/with-ajax.component.html +++ b/demo/src/app/basic/with-ajax.component.html @@ -1,5 +1,5 @@
    - + diff --git a/demo/src/app/basic/with-ajax.component.ts b/demo/src/app/basic/with-ajax.component.ts index 7f611e5a..5e87977d 100644 --- a/demo/src/app/basic/with-ajax.component.ts +++ b/demo/src/app/basic/with-ajax.component.ts @@ -11,6 +11,7 @@ export class WithAjaxComponent implements OnInit { mdIntro = 'assets/docs/basic/with-ajax/intro.md'; mdHTML = 'assets/docs/basic/with-ajax/source-html.md'; mdTS = 'assets/docs/basic/with-ajax/source-ts.md'; + mdTSV2 = 'assets/docs/basic/with-ajax/source-ts-dtv2.md'; dtOptions: Config = {}; diff --git a/demo/src/app/basic/with-options.component.html b/demo/src/app/basic/with-options.component.html index aa60df6c..f57727d8 100644 --- a/demo/src/app/basic/with-options.component.html +++ b/demo/src/app/basic/with-options.component.html @@ -73,5 +73,5 @@ - + diff --git a/demo/src/app/basic/with-options.component.ts b/demo/src/app/basic/with-options.component.ts index 5a23a058..f0fcc696 100644 --- a/demo/src/app/basic/with-options.component.ts +++ b/demo/src/app/basic/with-options.component.ts @@ -11,6 +11,7 @@ export class WithOptionsComponent implements OnInit { mdIntro = 'assets/docs/basic/with-options/intro.md'; mdHTML = 'assets/docs/basic/with-options/source-html.md'; mdTS = 'assets/docs/basic/with-options/source-ts.md'; + mdTSV2 = 'assets/docs/basic/with-options/source-ts-dtv2.md'; dtOptions: Config = {}; diff --git a/demo/src/app/dt-version.service.ts b/demo/src/app/dt-version.service.ts new file mode 100644 index 00000000..cee53994 --- /dev/null +++ b/demo/src/app/dt-version.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class DtVersionService { + + dtVersion: 'v2' | 'v1' = 'v2'; + + versionChanged$ = new BehaviorSubject<'v1'|'v2'>(this.dtVersion); + + constructor() { } +} diff --git a/demo/src/app/extensions/buttons-extension.component.html b/demo/src/app/extensions/buttons-extension.component.html index 8fd6fd0c..7cab6d84 100644 --- a/demo/src/app/extensions/buttons-extension.component.html +++ b/demo/src/app/extensions/buttons-extension.component.html @@ -1,6 +1,5 @@
    - + diff --git a/demo/src/app/extensions/buttons-extension.component.ts b/demo/src/app/extensions/buttons-extension.component.ts index d9b65f3b..574905d4 100644 --- a/demo/src/app/extensions/buttons-extension.component.ts +++ b/demo/src/app/extensions/buttons-extension.component.ts @@ -13,7 +13,7 @@ export class ButtonsExtensionComponent implements OnInit { mdInstall = 'assets/docs/extensions/buttons/installation.md'; mdHTML = 'assets/docs/extensions/buttons/source-html.md'; mdTS = 'assets/docs/extensions/buttons/source-ts.md'; - + mdTSV2 = 'assets/docs/extensions/buttons/source-ts-dtv2.md'; dtOptions: Config = {}; diff --git a/demo/src/app/extensions/colreorder-extension.component.html b/demo/src/app/extensions/colreorder-extension.component.html index 8fd6fd0c..7cab6d84 100644 --- a/demo/src/app/extensions/colreorder-extension.component.html +++ b/demo/src/app/extensions/colreorder-extension.component.html @@ -1,6 +1,5 @@
    - + diff --git a/demo/src/app/extensions/colreorder-extension.component.ts b/demo/src/app/extensions/colreorder-extension.component.ts index 0358aece..b60a1b62 100644 --- a/demo/src/app/extensions/colreorder-extension.component.ts +++ b/demo/src/app/extensions/colreorder-extension.component.ts @@ -13,6 +13,7 @@ export class ColreorderExtensionComponent implements OnInit { mdInstall = 'assets/docs/extensions/colreorder/installation.md'; mdHTML = 'assets/docs/extensions/colreorder/source-html.md'; mdTS = 'assets/docs/extensions/colreorder/source-ts.md'; + mdTSV2 = 'assets/docs/extensions/colreorder/source-ts-dtv2.md'; dtOptions: Config = {}; diff --git a/demo/src/app/extensions/fixed-columns-extension.component.html b/demo/src/app/extensions/fixed-columns-extension.component.html index 4d9fa9ad..cfd6db68 100644 --- a/demo/src/app/extensions/fixed-columns-extension.component.html +++ b/demo/src/app/extensions/fixed-columns-extension.component.html @@ -1,6 +1,5 @@
    - + diff --git a/demo/src/app/extensions/fixed-columns-extension.component.ts b/demo/src/app/extensions/fixed-columns-extension.component.ts index 54b42865..2ee0a16c 100644 --- a/demo/src/app/extensions/fixed-columns-extension.component.ts +++ b/demo/src/app/extensions/fixed-columns-extension.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import { Config } from 'datatables.net'; import 'datatables.net-fixedcolumns-dt'; @Component({ @@ -13,6 +12,7 @@ export class FixedColumnsExtensionComponent implements OnInit { mdInstall = 'assets/docs/extensions/fixedcolumns/installation.md'; mdHTML = 'assets/docs/extensions/fixedcolumns/source-html.md'; mdTS = 'assets/docs/extensions/fixedcolumns/source-ts.md'; + mdTSV2 = 'assets/docs/extensions/fixedcolumns/source-ts-dtv2.md'; // Unfortunately this still requires `any` due to types issue in fixedcolumns dtOptions: any = {}; diff --git a/demo/src/app/extensions/responsive-extension.component.html b/demo/src/app/extensions/responsive-extension.component.html index 8fd6fd0c..8b8f59b7 100644 --- a/demo/src/app/extensions/responsive-extension.component.html +++ b/demo/src/app/extensions/responsive-extension.component.html @@ -1,6 +1,5 @@
    - + diff --git a/demo/src/app/extensions/responsive-extension.component.ts b/demo/src/app/extensions/responsive-extension.component.ts index bdef45c8..147dd651 100644 --- a/demo/src/app/extensions/responsive-extension.component.ts +++ b/demo/src/app/extensions/responsive-extension.component.ts @@ -13,6 +13,7 @@ export class ResponsiveExtensionComponent implements OnInit { mdInstall = 'assets/docs/extensions/responsive/installation.md'; mdHTML = 'assets/docs/extensions/responsive/source-html.md'; mdTS = 'assets/docs/extensions/responsive/source-ts.md'; + mdTSV2 = 'assets/docs/extensions/responsive/source-ts-dtv2.md'; dtOptions: Config = {}; diff --git a/demo/src/app/extensions/select-extension.component.html b/demo/src/app/extensions/select-extension.component.html index 8fd6fd0c..7cab6d84 100644 --- a/demo/src/app/extensions/select-extension.component.html +++ b/demo/src/app/extensions/select-extension.component.html @@ -1,6 +1,5 @@
    - + diff --git a/demo/src/app/extensions/select-extension.component.ts b/demo/src/app/extensions/select-extension.component.ts index bc7c688a..fb093c90 100644 --- a/demo/src/app/extensions/select-extension.component.ts +++ b/demo/src/app/extensions/select-extension.component.ts @@ -13,6 +13,7 @@ export class SelectExtensionComponent implements OnInit { mdInstall = 'assets/docs/extensions/select/installation.md'; mdHTML = 'assets/docs/extensions/select/source-html.md'; mdTS = 'assets/docs/extensions/select/source-ts.md'; + mdTSV2 = 'assets/docs/extensions/select/source-ts-dtv2.md'; dtOptions: Config = {}; diff --git a/demo/src/assets/docs/advanced/custom-range/source-ts-dtv2.md b/demo/src/assets/docs/advanced/custom-range/source-ts-dtv2.md new file mode 100644 index 00000000..118eef0f --- /dev/null +++ b/demo/src/assets/docs/advanced/custom-range/source-ts-dtv2.md @@ -0,0 +1,64 @@ +```typescript +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; + +import { DataTableDirective } from 'angular-datatables'; +import { Config } from 'datatables.net'; + +// Example from https://datatables.net/examples/plug-ins/range_filtering.html +@Component({ + selector: 'app-custom-range-search', + templateUrl: 'custom-range-search.component.html' +}) +export class CustomRangeSearchComponent implements OnDestroy, OnInit { + + @ViewChild(DataTableDirective, {static: false}) + datatableElement: DataTableDirective; + min: number; + max: number; + + dtOptions: Config = {}; + + ngOnInit(): void { + // We need to call the $.fn.dataTable like this because DataTables typings do not have the "ext" property + $.fn['dataTable'].ext.search.push((settings: Config, data: any, dataIndex: number) => { + const id = parseFloat(data[0]) || 0; // use data for the id column + if ((isNaN(this.min) && isNaN(this.max)) || + (isNaN(this.min) && id <= this.max) || + (this.min <= id && isNaN(this.max)) || + (this.min <= id && id <= this.max)) { + return true; + } + return false; + }); + + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }] + }; + } + + ngOnDestroy(): void { + // We remove the last function in the global ext search array so we do not add the fn each time the component is drawn + // /!\ This is not the ideal solution as other components may add other search function in this array, so be careful when + // handling this global variable + $.fn['dataTable'].ext.search.pop(); + } + + filterById(): boolean { + this.datatableElement.dtInstance.then(dtInstance => { + dtInstance.draw(); + }); + return false; + } +} + +``` diff --git a/demo/src/assets/docs/advanced/dt-instance/source-ts-dtv2.md b/demo/src/assets/docs/advanced/dt-instance/source-ts-dtv2.md new file mode 100644 index 00000000..09ed6f84 --- /dev/null +++ b/demo/src/assets/docs/advanced/dt-instance/source-ts-dtv2.md @@ -0,0 +1,39 @@ +```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; + +import { DataTableDirective } from 'angular-datatables'; +import { Config } from 'datatables.net'; + +@Component({ + selector: 'app-dt-instance', + templateUrl: 'dt-instance.component.html' +}) +export class DtInstanceComponent implements OnInit { + + @ViewChild(DataTableDirective, {static: false}) + datatableElement: DataTableDirective; + + dtOptions: Config = {}; + + displayToConsole(datatableElement: DataTableDirective): void { + datatableElement.dtInstance.then(dtInstance => console.log(dtInstance)); + } + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }] + }; + } +} + +``` diff --git a/demo/src/assets/docs/advanced/indi-col-filter/source-ts-dtv2.md b/demo/src/assets/docs/advanced/indi-col-filter/source-ts-dtv2.md new file mode 100644 index 00000000..a242f39c --- /dev/null +++ b/demo/src/assets/docs/advanced/indi-col-filter/source-ts-dtv2.md @@ -0,0 +1,50 @@ +```typescript +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; + +import { DataTableDirective } from 'angular-datatables'; +import { Config } from 'datatables.net'; + +@Component({ + selector: 'app-individual-column-filtering', + templateUrl: 'individual-column-filtering.component.html' +}) +export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit { + + @ViewChild(DataTableDirective, {static: false}) + datatableElement: DataTableDirective; + + dtOptions: Config = {}; + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }] + }; + } + + ngAfterViewInit(): void { + this.datatableElement.dtInstance.then(dtInstance => { + dtInstance.columns().every(function () { + const that = this; + $('input', this.footer()).on('keyup change', function () { + if (that.search() !== this['value']) { + that + .search(this['value']) + .draw(); + } + }); + }); + }); + } +} + +``` diff --git a/demo/src/assets/docs/advanced/load-dt-opt-with-promise/source-ts-dtv2.md b/demo/src/assets/docs/advanced/load-dt-opt-with-promise/source-ts-dtv2.md new file mode 100644 index 00000000..11e4a024 --- /dev/null +++ b/demo/src/assets/docs/advanced/load-dt-opt-with-promise/source-ts-dtv2.md @@ -0,0 +1,27 @@ +```typescript +import { Component, Inject, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Config } from 'datatables.net'; + +@Component({ + selector: 'app-load-dt-options-with-promise', + templateUrl: 'load-dt-options-with-promise.component.html' +}) +export class LoadDtOptionsWithPromiseComponent implements OnInit { + + dtOptions: Promise; + + constructor(@Inject(HttpClient) private httpClient: HttpClient) {} + + ngOnInit(): void { + this.dtOptions = this.httpClient.get('data/dtOptions.json') + .toPromise() + .catch(this.handleError); + } + + private handleError(error: any): Promise { + console.error('An error occurred', error); // for demo purposes only + return Promise.reject(error.message || error); + } +} +``` diff --git a/demo/src/assets/docs/advanced/multiple-tables/source-ts-dtv2.md b/demo/src/assets/docs/advanced/multiple-tables/source-ts-dtv2.md new file mode 100644 index 00000000..86d48add --- /dev/null +++ b/demo/src/assets/docs/advanced/multiple-tables/source-ts-dtv2.md @@ -0,0 +1,47 @@ +```typescript +import { Component, OnInit, QueryList, ViewChildren } from '@angular/core'; +import { DataTableDirective } from 'angular-datatables'; +import { Config } from 'datatables.net'; + +@Component({ + selector: 'app-multiple-tables', + templateUrl: 'multiple-tables.component.html' +}) +export class MultipleTablesComponent implements OnInit { + + @ViewChildren(DataTableDirective) + dtElements: QueryList; + + dtOptions: Config[] = []; + + displayToConsole(): void { + this.dtElements.forEach((dtElement: DataTableDirective, index: number) => { + dtElement.dtInstance.then((dtInstance: any) => { + console.log(`The DataTable ${index} instance ID is: ${dtInstance.table().node().id}`); + }); + }); + } + + ngOnInit(): void { + this.dtOptions[0] = this.buildDtOptions('data/data.json'); + this.dtOptions[1] = this.buildDtOptions('data/data1.json'); + } + + private buildDtOptions(url: string): Config { + return { + ajax: url, + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }] + }; + } +} + +``` diff --git a/demo/src/assets/docs/advanced/rerender/source-ts-dtv2.md b/demo/src/assets/docs/advanced/rerender/source-ts-dtv2.md new file mode 100644 index 00000000..8c474fa8 --- /dev/null +++ b/demo/src/assets/docs/advanced/rerender/source-ts-dtv2.md @@ -0,0 +1,55 @@ +```typescript +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { DataTableDirective } from 'angular-datatables'; +import { Config } from 'datatables.net'; +import { Subject } from 'rxjs'; + +@Component({ + selector: 'app-rerender', + templateUrl: 'rerender.component.html' +}) +export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit { + + @ViewChild(DataTableDirective, {static: false}) + dtElement: DataTableDirective; + + dtOptions: Config = {}; + + dtTrigger: Subject = new Subject(); + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }] + }; + } + + ngAfterViewInit(): void { + this.dtTrigger.next(null); + } + + ngOnDestroy(): void { + // Do not forget to unsubscribe the event + this.dtTrigger.unsubscribe(); + } + + rerender(): void { + this.dtElement.dtInstance.then(dtInstance => { + // Destroy the table first + dtInstance.destroy(); + // Call the dtTrigger to rerender again + this.dtTrigger.next(null); + }); + } +} + +``` diff --git a/demo/src/assets/docs/advanced/router-link/source-ts-dtv2.md b/demo/src/assets/docs/advanced/router-link/source-ts-dtv2.md new file mode 100644 index 00000000..710d2356 --- /dev/null +++ b/demo/src/assets/docs/advanced/router-link/source-ts-dtv2.md @@ -0,0 +1,72 @@ +```typescript +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core'; +import { Router } from '@angular/router'; +import { Subject } from 'rxjs'; +import { IDemoNgComponentEventType } from './demo-ng-template-ref-event-type'; +import { DemoNgComponent } from './demo-ng-template-ref.component'; +import { ADTSettings } from 'angular-datatables/src/models/settings'; + +@Component({ + selector: 'app-router-link', + templateUrl: 'router-link.component.html' +}) +export class RouterLinkComponent implements AfterViewInit, OnInit, OnDestroy { + + dtOptions: ADTSettings = {}; + dtTrigger = new Subject(); + + @ViewChild('demoNg') demoNg: TemplateRef; + + constructor( + private router: Router + ) { } + + ngOnInit(): void { + } + + ngAfterViewInit() { + const self = this; + // init here as we use ViewChild ref + this.dtOptions = { + ajax: 'data/data.json', + columns: [ + { + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Action', + defaultContent: '', + ngTemplateRef: { + ref: this.demoNg, + context: { + // needed for capturing events inside + captureEvents: self.onCaptureEvent.bind(self) + } + } + } + ] + }; + + // race condition fails unit tests if dtOptions isn't sent with dtTrigger + setTimeout(() => { + this.dtTrigger.next(this.dtOptions); + }, 200); + } + + onCaptureEvent(event: IDemoNgComponentEventType) { + this.router.navigate(["/person/" + event.data.id]); + } + + ngOnDestroy(): void { + this.dtTrigger?.unsubscribe(); + } +} + +``` diff --git a/demo/src/assets/docs/advanced/router-link/source-ts.md b/demo/src/assets/docs/advanced/router-link/source-ts.md index 51d91e79..19d4736f 100644 --- a/demo/src/assets/docs/advanced/router-link/source-ts.md +++ b/demo/src/assets/docs/advanced/router-link/source-ts.md @@ -1,5 +1,5 @@ ```typescript -import { AfterViewInit, Component, OnInit, Renderer } from '@angular/core'; +import { AfterViewInit, Component, OnInit, Renderer2 } from '@angular/core'; import { Router } from '@angular/router'; @Component({ @@ -9,7 +9,7 @@ import { Router } from '@angular/router'; export class RouterLinkComponent implements AfterViewInit, OnInit { dtOptions: DataTables.Settings = {}; - constructor(private renderer: Renderer, private router: Router) { } + constructor(private renderer: Renderer2, private router: Router) { } ngOnInit(): void { this.dtOptions = { @@ -33,7 +33,7 @@ export class RouterLinkComponent implements AfterViewInit, OnInit { } ngAfterViewInit(): void { - this.renderer.listenGlobal('document', 'click', (event) => { + this.renderer.listen('document', 'click', (event) => { if (event.target.hasAttribute("view-person-id")) { this.router.navigate(["/person/" + event.target.getAttribute("view-person-id")]); } diff --git a/demo/src/assets/docs/advanced/router-link/source-tsHigh.md b/demo/src/assets/docs/advanced/router-link/source-tsHigh.md deleted file mode 100644 index 19d4736f..00000000 --- a/demo/src/assets/docs/advanced/router-link/source-tsHigh.md +++ /dev/null @@ -1,43 +0,0 @@ -```typescript -import { AfterViewInit, Component, OnInit, Renderer2 } from '@angular/core'; -import { Router } from '@angular/router'; - -@Component({ - selector: 'app-router-link', - templateUrl: 'router-link.component.html' -}) -export class RouterLinkComponent implements AfterViewInit, OnInit { - dtOptions: DataTables.Settings = {}; - - constructor(private renderer: Renderer2, private router: Router) { } - - ngOnInit(): void { - this.dtOptions = { - ajax: 'data/data.json', - columns: [{ - title: 'ID', - data: 'id' - }, { - title: 'First name', - data: 'firstName' - }, { - title: 'Last name', - data: 'lastName' - }, { - title: 'Action', - render: function (data: any, type: any, full: any) { - return 'View'; - } - }] - }; - } - - ngAfterViewInit(): void { - this.renderer.listen('document', 'click', (event) => { - if (event.target.hasAttribute("view-person-id")) { - this.router.navigate(["/person/" + event.target.getAttribute("view-person-id")]); - } - }); - } -} -``` diff --git a/demo/src/assets/docs/advanced/row-click/source-ts-dtv2.md b/demo/src/assets/docs/advanced/row-click/source-ts-dtv2.md new file mode 100644 index 00000000..f9a946bf --- /dev/null +++ b/demo/src/assets/docs/advanced/row-click/source-ts-dtv2.md @@ -0,0 +1,49 @@ +```typescript +import { Component, OnInit } from '@angular/core'; +import { Config } from 'datatables.net'; + +@Component({ + selector: 'app-row-click-event', + templateUrl: 'row-click-event.component.html' +}) +export class RowClickEventComponent implements OnInit { + + message = ''; + dtOptions: Config = {}; + + constructor() { } + + someClickHandler(info: any): void { + this.message = info.id + ' - ' + info.firstName; + } + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }], + rowCallback: (row: Node, data: any[] | Object, index: number) => { + const self = this; + // Unbind first in order to avoid any duplicate handler + // (see https://github.com/l-lin/angular-datatables/issues/87) + // Note: In newer jQuery v3 versions, `unbind` and `bind` are + // deprecated in favor of `off` and `on` + $('td', row).off('click'); + $('td', row).on('click', () => { + self.someClickHandler(data); + }); + return row; + } + }; + } +} + +``` diff --git a/demo/src/assets/docs/advanced/using-ng-pipe/source-ts-dtv2.md b/demo/src/assets/docs/advanced/using-ng-pipe/source-ts-dtv2.md new file mode 100644 index 00000000..d763c8b4 --- /dev/null +++ b/demo/src/assets/docs/advanced/using-ng-pipe/source-ts-dtv2.md @@ -0,0 +1,47 @@ +```typescript +import { CurrencyPipe, UpperCasePipe } from '@angular/common'; +import { Component, OnInit } from '@angular/core'; +import { ADTSettings } from 'angular-datatables/src/models/settings'; + +@Component({ + selector: 'app-using-ng-pipe', + templateUrl: './using-ng-pipe.component.html' +}) +export class UsingNgPipeComponent implements OnInit { + + constructor( + private pipeInstance: UpperCasePipe, + public pipeCurrencyInstance: CurrencyPipe + ) { } + + dtOptions: ADTSettings = {}; + + ngOnInit(): void { + + this.dtOptions = { + ajax: 'data/data.json', + columns: [ + { + title: 'Id (Money)', + data: 'id', + ngPipeInstance: this.pipeCurrencyInstance, + ngPipeArgs: ['USD','symbol'] + }, + { + title: 'First name', + data: 'firstName', + ngPipeInstance: this.pipeInstance + }, + { + title: 'Last name', + data: 'lastName', + ngPipeInstance: this.pipeInstance + } + ] + }; + + } + +} + +``` diff --git a/demo/src/assets/docs/basic/new-server-side/source-ts-dtv2.md b/demo/src/assets/docs/basic/new-server-side/source-ts-dtv2.md new file mode 100644 index 00000000..b47daed7 --- /dev/null +++ b/demo/src/assets/docs/basic/new-server-side/source-ts-dtv2.md @@ -0,0 +1,42 @@ +```typescript +import { Component } from "@angular/core"; +import { Config } from "datatables.net"; + +@Component({ + selector: "app-new-server-side", + templateUrl: "./new-server-side.component.html", + styleUrls: ["./new-server-side.component.css"], +}) +export class NewServerSideComponent { + dtOptions: Config = {}; + + ngOnInit(): void { + this.dtOptions = { + serverSide: true, // Set the flag + ajax: (dataTablesParameters: any, callback) => { + that.http.post("https://somedomain.com/api/1/data/", dataTablesParameters, {}).subscribe((resp) => { + callback({ + recordsTotal: resp.recordsTotal, + recordsFiltered: resp.recordsFiltered, + data: resp.data, + }); + }); + }, + columns: [ + { + title: "ID", + data: "id", + }, + { + title: "First name", + data: "firstName", + }, + { + title: "Last name", + data: "lastName", + }, + ], + }; + } +} +``` diff --git a/demo/src/assets/docs/basic/with-ajax-callback/source-ts-dtv2.md b/demo/src/assets/docs/basic/with-ajax-callback/source-ts-dtv2.md new file mode 100644 index 00000000..7bfa3b0b --- /dev/null +++ b/demo/src/assets/docs/basic/with-ajax-callback/source-ts-dtv2.md @@ -0,0 +1,49 @@ +```typescript +import { HttpClient } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { Config } from 'datatables.net'; +import { DataTablesResponse } from '../../datatables-response.model'; + +@Component({ + selector: 'app-with-ajax-callback', + templateUrl: './with-ajax-callback.component.html' +}) +export class WithAjaxCallbackComponent implements OnInit { + + constructor( + private http: HttpClient + ) { } + + dtOptions: Config = {}; + + ngOnInit(): void { + const that = this; + this.dtOptions = { + ajax: (dataTablesParameters: any, callback) => { + that.http + .post( + 'https://xtlncifojk.eu07.qoddiapp.com/', + dataTablesParameters, {} + ).subscribe(resp => { + callback({ + recordsTotal: resp.recordsTotal, + recordsFiltered: resp.recordsFiltered, + data: resp.data + }); + }); + }, + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }] + }; + } +} + +``` diff --git a/demo/src/assets/docs/basic/with-ajax/source-ts-dtv2.md b/demo/src/assets/docs/basic/with-ajax/source-ts-dtv2.md new file mode 100644 index 00000000..f41a36b1 --- /dev/null +++ b/demo/src/assets/docs/basic/with-ajax/source-ts-dtv2.md @@ -0,0 +1,29 @@ +```typescript +import { Component, OnInit } from '@angular/core'; +import { Config } from 'datatables.net'; + +@Component({ + selector: 'app-with-ajax', + templateUrl: 'with-ajax.component.html' +}) +export class WithAjaxComponent implements OnInit { + + dtOptions: Config = {}; + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }] + }; + } +} +``` diff --git a/demo/src/assets/docs/basic/with-options/source-ts-dtv2.md b/demo/src/assets/docs/basic/with-options/source-ts-dtv2.md new file mode 100644 index 00000000..f155ece1 --- /dev/null +++ b/demo/src/assets/docs/basic/with-options/source-ts-dtv2.md @@ -0,0 +1,20 @@ +```typescript +import { Component, OnInit } from '@angular/core'; +import { Config } from 'datatables.net'; + +@Component({ + selector: 'app-with-options', + templateUrl: 'with-options.component.html' +}) +export class WithOptionsComponent implements OnInit { + + dtOptions: Config = {}; + + ngOnInit(): void { + this.dtOptions = { + pagingType: 'full_numbers' + }; + } +} + +``` diff --git a/demo/src/assets/docs/extensions/buttons/source-ts-dtv2.md b/demo/src/assets/docs/extensions/buttons/source-ts-dtv2.md new file mode 100644 index 00000000..7e9e23c2 --- /dev/null +++ b/demo/src/assets/docs/extensions/buttons/source-ts-dtv2.md @@ -0,0 +1,53 @@ +```typescript +import { Component, OnInit } from '@angular/core'; +import { Config } from 'datatables.net-dt'; +import 'datatables.net-buttons-dt'; + +@Component({ + selector: 'app-buttons-extension', + templateUrl: 'buttons-extension.component.html' +}) +export class ButtonsExtensionComponent implements OnInit { + + dtOptions: Config = {}; + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }], + // Declare the use of the extension in the dom parameter + dom: 'Bfrtip', + // Configure the buttons + buttons: [ + 'columnsToggle', + 'colvis', + 'copy', + { + extend: 'csv', + text: 'CSV export', + fieldSeparator: ';', + exportOptions: [1, 2, 3] + }, + 'excel', + { + text: 'Some button', + key: '1', + action: function (e, dt, node, config) { + alert('Button activated'); + } + } + ] + }; + } +} + +``` diff --git a/demo/src/assets/docs/extensions/colreorder/source-ts-dtv2.md b/demo/src/assets/docs/extensions/colreorder/source-ts-dtv2.md new file mode 100644 index 00000000..384bb2a1 --- /dev/null +++ b/demo/src/assets/docs/extensions/colreorder/source-ts-dtv2.md @@ -0,0 +1,36 @@ +```typescript +import { Component, OnInit } from '@angular/core'; +import { Config } from 'datatables.net'; +import 'datatables.net-colreorder'; + +@Component({ + selector: 'app-colreorder-extension', + templateUrl: 'colreorder-extension.component.html' +}) +export class ColreorderExtensionComponent implements OnInit { + + dtOptions: Config = {}; + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'No move me!', + data: 'id' + }, { + title: 'Try to move me!', + data: 'firstName' + }, { + title: 'You cannot move me! *evil laugh*', + data: 'lastName' + }], + dom: 'Rt', + // Use this attribute to enable colreorder + colReorder: { + order: [1, 0, 2], + } + }; + } +} + +``` diff --git a/demo/src/assets/docs/extensions/fixedcolumns/source-ts-dtv2.md b/demo/src/assets/docs/extensions/fixedcolumns/source-ts-dtv2.md new file mode 100644 index 00000000..a6797ffa --- /dev/null +++ b/demo/src/assets/docs/extensions/fixedcolumns/source-ts-dtv2.md @@ -0,0 +1,95 @@ +```typescript +import { Component, OnInit } from '@angular/core'; +import 'datatables.net-fixedcolumns-dt'; + +@Component({ + selector: 'app-fixed-columns-extension', + templateUrl: 'fixed-columns-extension.component.html' +}) +export class FixedColumnsExtensionComponent implements OnInit { + + // Unfortunately this still requires `any` due to "types" issues in fixedcolumns + dtOptions: any = {}; + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + } + + ], + // Make sure that scrollX is set to true for this to work! + scrollX: true, + fixedColumns: { + left: 3, + right: 0 + }, + }; + } +} + +``` diff --git a/demo/src/assets/docs/extensions/responsive/source-ts-dtv2.md b/demo/src/assets/docs/extensions/responsive/source-ts-dtv2.md new file mode 100644 index 00000000..16039fb7 --- /dev/null +++ b/demo/src/assets/docs/extensions/responsive/source-ts-dtv2.md @@ -0,0 +1,33 @@ +```typescript +import { Component, OnInit } from '@angular/core'; +import { Config } from 'datatables.net-dt'; +import 'datatables.net-responsive'; + +@Component({ + selector: 'app-responsive-extension', + templateUrl: 'responsive-extension.component.html' +}) +export class ResponsiveExtensionComponent implements OnInit { + + dtOptions: Config = {}; + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName', + className: 'none' + }], + // Use this attribute to enable the responsive extension + responsive: true + }; + } +} +``` diff --git a/demo/src/assets/docs/extensions/select/source-ts-dtv2.md b/demo/src/assets/docs/extensions/select/source-ts-dtv2.md new file mode 100644 index 00000000..1b431bb7 --- /dev/null +++ b/demo/src/assets/docs/extensions/select/source-ts-dtv2.md @@ -0,0 +1,32 @@ +```typescript +import { Component, OnInit } from '@angular/core'; +import { Config } from 'datatables.net'; +import 'datatables.net-select'; + +@Component({ + selector: 'app-select-extension', + templateUrl: 'select-extension.component.html' +}) +export class SelectExtensionComponent implements OnInit { + + dtOptions: Config = {}; + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }], + // Use this attribute to enable the select extension + select: true + }; + } +} +``` diff --git a/demo/src/styles.css b/demo/src/styles.css index 0323fb7d..2dff4639 100644 --- a/demo/src/styles.css +++ b/demo/src/styles.css @@ -20,7 +20,7 @@ header, main, footer { } .top-banner { - height: 120px !important; + min-height: 120px !important; } .banner { @@ -156,7 +156,7 @@ markdown h5:not(markdown.faqMarkdown) { } -/** Fixed columns css +/** Fixed columns css These classes are injected by fixed columns extensions and can be tweaked here to match the colors of headers and body @@ -184,4 +184,16 @@ table.dataTable tbody tr > .dtfc-fixed-right { div.dtfc-left-top-blocker, div.dtfc-right-top-blocker { background-color: white; -} \ No newline at end of file +} + +/* Dt v2 CSS messed up some stuff */ +.dt-search input { + width: 200px !important; + height: 20px !important; +} + +select.dt-input { + display: inline-block !important; + width: 60px; + height: 40px; +}