import { Component , OnDestroy , OnInit , ViewChild } from '@angular/core' ; import { DataTableDirective } from 'angular-datatables' ; @ Component ( { selector : 'app-custom-range-search' , templateUrl : 'custom-range-search.component.html' } ) export class CustomRangeSearchComponent implements OnDestroy , OnInit { pageTitle = 'Custom filtering - Range search' ; 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' ; @ ViewChild ( DataTableDirective , { static : false } ) datatableElement : DataTableDirective ; min : number ; max : number ; dtOptions : DataTables . Settings = { } ; ngOnInit ( ) { $ . fn [ 'dataTable' ] . ext . search . push ( ( settings , data , dataIndex ) => { const id = parseFloat ( data [ 0 ] ) || 0 ; if ( ( isNaN ( this . min ) && isNaN ( this . max ) ) || ( isNaN ( this . min ) && id <= this . max ) || ( this . min <= id && isNaN ( this . max ) ) || ( this . min <= id && id <= this . max ) ) { return true ; } return false ; } ) ; this . dtOptions = { ajax : 'data/data.json' , columns : [ { title : 'ID' , data : 'id' } , { title : 'First name' , data : 'firstName' } , { title : 'Last name' , data : 'lastName' } ] } ; } ngOnDestroy ( ) { $ . fn [ 'dataTable' ] . ext . search . pop ( ) ; } filterById ( ) { this . datatableElement . dtInstance . then ( ( dtInstance ) => { dtInstance . draw ( ) ; } ) ; return false ; } }