docs: app supports v1 and v2 docs

Author: shanmukhateja

demo/src/app/advanced/custom-range-search.component.html

@@ -13,5 +13,5 @@
   <br />
   <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
 </ng-template>
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdHTMLV2]="mdHTML" [mdTSV2]="mdTSV2" [mdTS]="mdTS" [template]="preview">
 </app-base-demo>

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;

demo/src/app/advanced/dt-instance.component.html

@@ -9,5 +9,5 @@
   </blockquote>
   <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
 </ng-template>
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdHTMLV2]="mdHTML" [mdTS]="mdTS" [mdTSV2]="mdTSV2" [template]="preview">
 </app-base-demo>

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;

demo/src/app/advanced/individual-column-filtering.component.html

@@ -9,5 +9,5 @@
     </tfoot>
   </table>
 </ng-template>
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdHTMLV2]="mdHTML" [mdTS]="mdTS" [mdTSV2]="mdTSV2" [template]="preview">
 </app-base-demo>

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;

demo/src/app/advanced/load-dt-options-with-promise.component.html

@@ -1,5 +1,5 @@
 <ng-template #preview>
   <table datatable [dtOptions]="$any(dtOptions)" class="row-border hover"></table>
 </ng-template>
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [mdTSV2]="mdTSV2" [template]="preview">
 </app-base-demo>

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

demo/src/app/advanced/multiple-tables.component.html

@@ -11,5 +11,5 @@ <h5 class="header">Table 2</h5>
   <table id="second-table" datatable [dtOptions]="dtOptions[1]" class="row-border hover"></table>
 
 </ng-template>
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdHTMLV2]="mdHTML" [mdTS]="mdTS" [mdTSV2]="mdTSV2" [template]="preview">
 </app-base-demo>

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

demo/src/app/advanced/rerender.component.html

@@ -6,5 +6,5 @@
   </p>
   <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"></table>
 </ng-template>
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdHTMLV2]="mdHTML" [mdTS]="mdTS" [mdTSV2]="mdTSV2" [template]="preview">
 </app-base-demo>

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

demo/src/app/advanced/router-link.component.html

@@ -6,5 +6,5 @@
   <app-demo-ng-template-ref [data]="data" actionText="View" (emitter)="emitter($event)"></app-demo-ng-template-ref>
 </ng-template>
 
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [mdTSV2]="mdTSV2" [template]="preview">
 </app-base-demo>

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 = {};

demo/src/app/advanced/row-click-event.component.html

@@ -4,5 +4,5 @@
 <br />
 <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
 </ng-template>
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [mdTSV2]="mdTSV2" [template]="preview">
 </app-base-demo>

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 = {};

demo/src/app/advanced/using-ng-pipe.component.html

@@ -1,5 +1,5 @@
 <ng-template #preview>
   <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
 </ng-template>
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [mdTSV2]="mdTSV2" [template]="preview">
 </app-base-demo>

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 = {};

demo/src/app/advanced/using-ng-template-ref.component.html

@@ -4,7 +4,7 @@
   <br />
   <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"></table>
 </ng-template>
-<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [mdTSV2]="mdTSV2" [template]="preview">
 </app-base-demo>
 
 <ng-template #demoNg let-data="adtData" let-emitter="captureEvents">

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<ADTSettings> = new Subject<ADTSettings>();

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;
+}

demo/src/app/app.component.html

@@ -17,6 +17,20 @@ <h3>
         </a>
       </h3>
     </li>
+    <li>
+      <a class="dt-version-button btn-flat" data-activates='dropdown1'>
+        DT version: '{{dtVersion}}'
+        <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
+      </a>
+
+      <ul id="dropdown1" [(ngModel)]="dtVersion" ngDefaultControl class='dropdown-content'>
+        <li [class.active]="dtVersion == 'v2'" (click)="onDTVersionChanged('v2')" value="v2" style="padding:0 32px">v2.x</li>
+        <li [class.active]="dtVersion == 'v1'" (click)="onDTVersionChanged('v1')" value="v1" style="padding:0 32px">v1.x</li>
+      </ul>
+    </li>
+    <li>
+      <div class="divider"></div>
+    </li>
     <li><a class="subheader">Getting Started</a></li>
     <li class="bold">
       <a routerLink="/getting-started" class="waves-effect waves-blue">Installation</a>

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 {

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,

demo/src/app/base-demo/base-demo.component.css

@@ -26,3 +26,7 @@
 #toTop .material-icons {
   vertical-align: middle;
 }
+
+.dtv1-notice {
+  padding: 10px;
+}

demo/src/app/base-demo/base-demo.component.html

@@ -16,6 +16,12 @@ <h2 class="header center-on-small-only">{{pageTitle}}</h2>
   </div>
 </div>
 
+<div class="section" *ngIf="dtVersion == 'v1'">
+  <div class="container red white-text dtv1-notice">
+    You are viewing documentation for v1.x of datatables.net. This version is not supported anymore. It is listed here for documentation purposes only.
+  </div>
+</div>
+
 <div class="container">
 
   <h5 class="header">Description</h5>
@@ -30,7 +36,7 @@ <h5 class="header">Description</h5>
         <li class="tab col">
           <a href="#previewTab">Preview</a>
         </li>
-        <li class="tab col" *ngIf="mdInstall.length>0">
+        <li class="tab col" *ngIf="dtVersion == 'v2' ? mdInstallV2.length>0 : mdInstall.length>0">
           <a href="#installTab">Installation</a>
         </li>
         <li class="tab col">
@@ -43,22 +49,22 @@ <h5 class="header">Description</h5>
     </div>
 
     <!-- Preview -->
-    <div id="previewTab" class="  col s12">
+    <div id="previewTab" class="col s12">
       <ng-container *ngTemplateOutlet="template"></ng-container>
     </div>
 
     <!-- Installation -->
-    <div id="installTab" class="col s12" *ngIf="mdInstall.length > 0">
-      <markdown [src]="mdInstall"></markdown>
+    <div id="installTab" class="col s12" *ngIf="dtVersion == 'v2' ? mdInstallV2.length > 0 : mdInstall.length > 0">
+      <markdown [src]="dtVersion == 'v2' ? mdInstallV2 : mdInstall"></markdown>
     </div>
 
     <!-- HTML -->
     <div id="htmlTab" class="col s12">
-      <markdown [src]="mdHTML"></markdown>
+      <markdown [src]="dtVersion == 'v2' && mdHTMLV2.length > 0 ? mdHTMLV2 : mdHTML"></markdown>
     </div>
 
     <div id="typescriptTab" class="col s12">
-      <markdown [src]="mdTS"></markdown>
+      <markdown [src]="dtVersion == 'v2' && mdTSV2.length > 0 ? mdTSV2 : mdTS"></markdown>
     </div>
   </div>
 </div>

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<any> = null;
+  @Input() template: TemplateRef<any> = 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();
+  }
+
 }