Data Table with sorting, pagination, row count and search

Data Table

Installation

NPM

You need to install its dependencies before getting the latest release using NPM:

npm install jquery --save

npm install datatables.net --save

npm install datatables.net-dt --save

npm install angular-datatables --save

npm install @types/jquery --save-dev

npm 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