Data Table
Installation
NPM
You
need to install its dependencies before getting the latest release using NPM:npm install jquery --savenpm install datatables.net --savenpm install datatables.net-dt --savenpm install angular-datatables --savenpm install @types/jquery --save-devnpm install @types/datatables.net --save-dev
Setup
angular.json
Add
the dependencies in the scripts and styles attributes to angular.json:
"styles": [
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
],
NgModule
Import
the DataTablesModule at the
appropriate level of your app.
import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { DataTablesModule } from'angular-datatables';
import { AppComponent } from'./app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DataTablesModule
],
providers: [],
bootstrap: [ AppComponent ]
})
exportclassAppModule {}
Please update your
tsconfig.json and add the following
blocks:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
],
//Custom added for datatable
"paths": {
"@angular/*": [
"../node_modules/@angular/*"
]
}
}
}
App.component.html
<divstyle="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<divstyle="margin:
30px auto; width:600px;">
<tabledatatable[dtOptions]="dtOptions"class="row-border
hover">
<tfoot>
<tr>
<th><inputtype="text"placeholder="Search
ID"name="search-id"/></th>
<th><inputtype="text"placeholder="Search
First Name"name="search-first-name"/></th>
<th><inputtype="text"placeholder="Search
Last Name"name="search-last-name"/></th>
</tr>
</tfoot>
</table>
</div>
App.component.ts
import { AfterViewInit, Component, OnInit, ViewChild } from'@angular/core';
import { DataTableDirective } from'angular-datatables';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.css']
})
exportclassAppComponentimplementsOnInit, AfterViewInit {
title = 'Employee Details';
@ViewChild(DataTableDirective)
datatableElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
ngOnInit(): void {
this.dtOptions = {
ajax:'assets/jsonData.json',
columns: [{
title:'ID',
data:'id'
}, {
title:'First name',
data:'firstName'
}, {
title:'Last name',
data:'lastName'
}]
};
}
ngAfterViewInit(): void {
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.columns().every(function () {
// Footer textbox search
start
constthat = this;
$('input', this.footer()).on('keyup
change', function () {
if (that.search() !== this['value']) {
that
.search(this['value'])
.draw();
}
});
// Footer textbox search End
});
});
}
}
jsonData.json
{
"data": [
{
"id": "01",
"firstName": "Smith",
"lastName": "KNR"
},
{
"id": "02",
"firstName": "Johnson",
"lastName": "ch"
},
{
"id": "03",
"firstName": "Williams",
"lastName": "Smith"
},
{
"id": "04",
"firstName": "Jones",
"lastName": "Abhraham"
},
{
"id": "05",
"firstName": "Brown",
"lastName": "Antony"
},
{
"id": "06",
"firstName": "Wood",
"lastName": "KVSC"
},
{
"id": "07",
"firstName": "Davis",
"lastName": "Bincy"
},
{
"id": "08",
"firstName": "Miller",
"lastName": "Wilson"
},
{
"id": "09",
"firstName": "Wilson",
"lastName": "Wilson"
},
{
"id": "10",
"firstName": "Wood",
"lastName": "KVSC"
},
{
"id": "11",
"firstName": "Barnes",
"lastName": "Barnes"
},
{
"id": "12",
"firstName": "Henderson",
"lastName": "Henderson"
},
{
"id": "13",
"firstName": "Coleman",
"lastName": "Nag"
},
{
"id": "14",
"firstName": "Jenkins",
"lastName": "Jenkins"
},
{
"id": "15",
"firstName": "Perry",
"lastName": "Perry"
},
{
"id": "16",
"firstName": "Powell",
"lastName": "Powell"
}
]
}
Output
