Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 98cac3f

Browse files
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 () {
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)

AltStyle によって変換されたページ (->オリジナル) /