Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 98cac3f

Browse files
shanmukhatejashanmukhateja
committed
feat: migrate app to Datatables v2
1 parent ebab1a5 commit 98cac3f

40 files changed

+12939
-16034
lines changed

‎angular.json

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"projects": {
66
"angular-datatables-demo": {
77
"root": "demo",
8-
"sourceRoot": "src",
8+
"sourceRoot": "demo/src",
99
"projectType": "application",
1010
"architect": {
1111
"build": {
@@ -19,17 +19,16 @@
1919
"zone.js"
2020
],
2121
"assets": [
22-
"src/assets",
23-
"src/archives",
24-
"src/data",
25-
"src/favicon.png"
22+
"demo/src/assets",
23+
"demo/src/data",
24+
"demo/src/favicon.png"
2625
],
2726
"styles": [
28-
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
29-
"node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
30-
"node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
31-
"node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
32-
"node_modules/datatables.net-select-dt/css/select.dataTables.css",
27+
"node_modules/datatables.net-dt/css/dataTables.dataTables.min.css",
28+
"node_modules/datatables.net-buttons-dt/css/buttons.dataTables.min.css",
29+
"node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.min.css",
30+
"node_modules/datatables.net-responsive-dt/css/responsive.dataTables.min.css",
31+
"node_modules/datatables.net-select-dt/css/select.dataTables.min.css",
3332
"node_modules/materialize-css/dist/css/materialize.css",
3433
"node_modules/prism-themes/themes/prism-material-dark.css",
3534
"demo/src/styles.css",
@@ -40,15 +39,15 @@
4039
"node_modules/tether/dist/js/tether.js",
4140
"node_modules/materialize-css/dist/js/materialize.js",
4241
"node_modules/jszip/dist/jszip.js",
43-
"node_modules/datatables.net/js/jquery.dataTables.js",
44-
"node_modules/datatables.net-buttons/js/dataTables.buttons.js",
45-
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
46-
"node_modules/datatables.net-buttons/js/buttons.flash.js",
47-
"node_modules/datatables.net-buttons/js/buttons.html5.js",
48-
"node_modules/datatables.net-buttons/js/buttons.print.js",
49-
"node_modules/datatables.net-colreorder/js/dataTables.colReorder.js",
50-
"node_modules/datatables.net-responsive/js/dataTables.responsive.js",
51-
"node_modules/datatables.net-select/js/dataTables.select.js",
42+
"node_modules/datatables.net/js/dataTables.min.js",
43+
"node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
44+
"node_modules/datatables.net-buttons/js/buttons.colVis.min.js",
45+
"node_modules/datatables.net-buttons/js/buttons.flash.min.js",
46+
"node_modules/datatables.net-buttons/js/buttons.html5.min.js",
47+
"node_modules/datatables.net-buttons/js/buttons.print.min.js",
48+
"node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js",
49+
"node_modules/datatables.net-responsive/js/dataTables.responsive.min.js",
50+
"node_modules/datatables.net-select/js/dataTables.select.min.js",
5251
"node_modules/marked/marked.min.js",
5352
"node_modules/prismjs/prism.js",
5453
"node_modules/prismjs/components/prism-typescript.min.js",
@@ -66,7 +65,10 @@
6665
"buildOptimizer": false,
6766
"sourceMap": true,
6867
"optimization": false,
69-
"namedChunks": true
68+
"namedChunks": true,
69+
"allowedCommonJsDependencies": [
70+
"jquery"
71+
]
7072
},
7173
"configurations": {
7274
"production": {
@@ -109,7 +111,7 @@
109111
"scripts": [
110112
"node_modules/jquery/dist/jquery.js",
111113
"node_modules/tether/dist/js/tether.js",
112-
"node_modules/datatables.net/js/jquery.dataTables.js",
114+
"node_modules/datatables.net/js/dataTables.min.js",
113115
"node_modules/jszip/dist/jszip.js",
114116
"node_modules/datatables.net-buttons/js/dataTables.buttons.js",
115117
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
@@ -122,7 +124,7 @@
122124
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
123125
],
124126
"styles": [
125-
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
127+
"node_modules/datatables.net-dt/css/dataTables.dataTables.css",
126128
"node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
127129
"node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
128130
"node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",

‎demo/src/app/advanced/custom-range-search.component.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
22

33
import { DataTableDirective } from 'angular-datatables';
4+
import { Config } from 'datatables.net';
45

56
// Example from https://datatables.net/examples/plug-ins/range_filtering.html
67
@Component({
@@ -19,11 +20,11 @@ export class CustomRangeSearchComponent implements OnDestroy, OnInit {
1920
min: number;
2021
max: number;
2122

22-
dtOptions: DataTables.Settings = {};
23+
dtOptions: Config = {};
2324

2425
ngOnInit(): void {
2526
// We need to call the $.fn.dataTable like this because DataTables typings do not have the "ext" property
26-
$.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {
27+
$.fn['dataTable'].ext.search.push((settings: Config, data: any, dataIndex: number) => {
2728
const id = parseFloat(data[0]) || 0; // use data for the id column
2829
if ((isNaN(this.min) && isNaN(this.max)) ||
2930
(isNaN(this.min) && id <= this.max) ||
@@ -57,7 +58,7 @@ export class CustomRangeSearchComponent implements OnDestroy, OnInit {
5758
}
5859

5960
filterById(): boolean {
60-
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
61+
this.datatableElement.dtInstance.then(dtInstance => {
6162
dtInstance.draw();
6263
});
6364
return false;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</button>
66
</p>
77
<blockquote>
8-
The DataTable instance ID is: {{ (datatableElement?.dtInstance | async)?.table().node()['id'] }}
8+
The DataTable instance ID is: {{ $any((datatableElement?.dtInstance | async)?.table().node())['id'] }}
99
</blockquote>
1010
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
1111
</ng-template>

‎demo/src/app/advanced/dt-instance.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, OnInit, ViewChild } from '@angular/core';
22

33
import { DataTableDirective } from 'angular-datatables';
4+
import { Config } from 'datatables.net';
45

56
@Component({
67
selector: 'app-dt-instance',
@@ -16,10 +17,10 @@ export class DtInstanceComponent implements OnInit {
1617
@ViewChild(DataTableDirective, {static: false})
1718
datatableElement: DataTableDirective;
1819

19-
dtOptions: DataTables.Settings = {};
20+
dtOptions: Config = {};
2021

2122
displayToConsole(datatableElement: DataTableDirective): void {
22-
datatableElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance));
23+
datatableElement.dtInstance.then(dtInstance => console.log(dtInstance));
2324
}
2425

2526
ngOnInit(): void {

‎demo/src/app/advanced/individual-column-filtering.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
22

33
import { DataTableDirective } from 'angular-datatables';
4+
import { Config } from 'datatables.net';
45

56
@Component({
67
selector: 'app-individual-column-filtering',
@@ -16,7 +17,7 @@ export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit
1617
@ViewChild(DataTableDirective, {static: false})
1718
datatableElement: DataTableDirective;
1819

19-
dtOptions: DataTables.Settings = {};
20+
dtOptions: Config = {};
2021

2122
ngOnInit(): void {
2223
this.dtOptions = {
@@ -35,7 +36,7 @@ export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit
3536
}
3637

3738
ngAfterViewInit(): void {
38-
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
39+
this.datatableElement.dtInstance.then(dtInstance => {
3940
dtInstance.columns().every(function () {
4041
const that = this;
4142
$('input', this.footer()).on('keyup change', function () {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ng-template #preview>
2-
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
2+
<table datatable [dtOptions]="$any(dtOptions)" class="row-border hover"></table>
33
</ng-template>
44
<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
55
</app-base-demo>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, Inject, OnInit } from '@angular/core';
22
import { HttpClient } from '@angular/common/http';
3+
import { Config } from 'datatables.net';
34

45
@Component({
56
selector: 'app-load-dt-options-with-promise',
@@ -12,12 +13,12 @@ export class LoadDtOptionsWithPromiseComponent implements OnInit {
1213
mdHTML = 'assets/docs/advanced/load-dt-opt-with-promise/source-html.md';
1314
mdTS = 'assets/docs/advanced/load-dt-opt-with-promise/source-ts.md';
1415

15-
dtOptions: Promise<DataTables.Settings>;
16+
dtOptions: Promise<Config>;
1617

1718
constructor(@Inject(HttpClient) private httpClient: HttpClient) {}
1819

1920
ngOnInit(): void {
20-
this.dtOptions = this.httpClient.get<DataTables.Settings>('data/dtOptions.json')
21+
this.dtOptions = this.httpClient.get<Config>('data/dtOptions.json')
2122
.toPromise()
2223
.catch(this.handleError);
2324
}

‎demo/src/app/advanced/multiple-tables.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
22
import { DataTableDirective } from 'angular-datatables';
3+
import { Config } from 'datatables.net';
34

45
@Component({
56
selector: 'app-multiple-tables',
@@ -15,7 +16,7 @@ export class MultipleTablesComponent implements OnInit {
1516
@ViewChildren(DataTableDirective)
1617
dtElements: QueryList<DataTableDirective>;
1718

18-
dtOptions: DataTables.Settings[] = [];
19+
dtOptions: Config[] = [];
1920

2021
displayToConsole(): void {
2122
this.dtElements.forEach((dtElement: DataTableDirective, index: number) => {
@@ -30,7 +31,7 @@ export class MultipleTablesComponent implements OnInit {
3031
this.dtOptions[1] = this.buildDtOptions('data/data1.json');
3132
}
3233

33-
private buildDtOptions(url: string): DataTables.Settings {
34+
private buildDtOptions(url: string): Config {
3435
return {
3536
ajax: url,
3637
columns: [{

‎demo/src/app/advanced/rerender.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
22
import { DataTableDirective } from 'angular-datatables';
3+
import { Config } from 'datatables.net';
34
import { Subject } from 'rxjs';
45

56
@Component({
@@ -17,7 +18,7 @@ export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
1718
@ViewChild(DataTableDirective, {static: false})
1819
dtElement: DataTableDirective;
1920

20-
dtOptions: DataTables.Settings = {};
21+
dtOptions: Config = {};
2122

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

@@ -47,7 +48,7 @@ export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
4748
}
4849

4950
rerender(): void {
50-
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
51+
this.dtElement.dtInstance.then(dtInstance => {
5152
// Destroy the table first
5253
dtInstance.destroy();
5354
// Call the dtTrigger to rerender again

‎demo/src/app/advanced/router-link.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
22
import { Router } from '@angular/router';
3-
import { ADTSettings } from 'angular-datatables/src/models/settings';
43
import { Subject } from 'rxjs';
54
import { IDemoNgComponentEventType } from './demo-ng-template-ref-event-type';
65
import { DemoNgComponent } from './demo-ng-template-ref.component';
6+
import { ADTSettings } from 'angular-datatables/src/models/settings';
77

88
@Component({
99
selector: 'app-router-link',

0 commit comments

Comments
 (0)