Angular search filter is not working in Datatable

Question

I Have created DataTable in Angular JS. it works fine but now I'm implementing search filter using angular pipe. For this case I have created following code

app.component.ts

import { Component  } from '@angular/core';
import { Pipe, PipeTransform, Injectable } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<input [(model)]="query" type="text" />
  <ul>
        <li *ngFor="let item of mf.data | search:query" >{{item.name}}</li>
  </ul>`,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent   {

   private obj: any =[
    { name: "Sinta", email: "[email protected]", age: "50" },
    { name: "Jojo", email: "[email protected]", age: "15" },
    { name: "Andre", email: "[email protected]", age: "85" } ];

private userlist: any[]=[];

constructor() {
    this.userlist=this.obj;
 }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DataTableModule } from "angular2-datatable";
import { Pipe, PipeTransform, Injectable } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
@Pipe({
    name: 'search',
    pure: false
})
@Injectable()
export class search implements PipeTransform {
     transform(item:any[], args:any):any[] {
        var isSearch = (data:any): bool => {
            var isAll = false;
            if(typeof data === 'object' ){
                for (var z in data) {
                    if(isAll = isSearch(data[z]) ){
                        break;
                    }
                }
            } else {
                if(typeof args === 'number'){
                    isAll = data === args;
                } else {
                    isAll = data.toString().match( new RegExp(args, 'i') );
                }
            } 

            return isAll;
        };

        return item.filter(isSearch);
    }
}

but it is not working what is i'm looking for, could any one please help to build in the process of filter pipe

Can you please explain which field you have to filter all field or one field. — Karnan Muthukumar
– Karnan Muthukumar, Commented Jun 21, 2018 at 2:01
I want search filter for Name. I mean If we search a name then it should be display particular user details which is having under name — GonnaHack
– GonnaHack, Commented Jun 21, 2018 at 3:51

Pang · Accepted Answer · 2018-06-21 10:13:51Z

Html File

<label>Search</label>
<input type="text" [(ngModel)]="searchTxt" name="searchTxt" placeholder="search name">

<div class="col-md-6">
  <table class="table table-striped" [mfData]="userlist | search:searchTxt" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
      <tr>
        <th style="width: 20%">
          <mfDefaultSorter by="name">Name</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="email">Email</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="age">Age</mfDefaultSorter>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of mf.data">
        <ng-container *ngIf="item == -1">
          <td colspan="3" align="center">No Data Found</td>
        </ng-container>
        <ng-container *ngIf="item!=-1">
          <td>{{item.name}}</td>
          <td>{{item.email}}</td>
          <td class="text-right">{{item.age}}</td>
        </ng-container>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

Typescript File

public searchTxt:any;
public obj: any =[
    { name: "Sinta", email: "[email protected]", age: "50" },
    { name: "Jojo", email: "[email protected]", age: "15" },
    { name: "Andre", email: "[email protected]", age: "85" },
    { name: "Simpson", email: "[email protected]", age: "45" },
    { name: "Doly", email: "[email protected]", age: "40" },
    { name: "Bintang", email: "[email protected]", age: "36" },
    { name: "Aria", email: "[email protected]", age: "74" },
    { name: "Sams", email: "[email protected]", age: "8" },
    { name: "Oly", email: "[email protected]", age: "12" }
  ];

  userlist: any[]=[];
constructor() {   
    this.userlist=this.obj;
}

SearchPipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'search'
})

export class SearchPipe implements PipeTransform {
    private searchKeyword: string = "";
    private Result = [];

    constructor() {

    }

    transform(items: any[], searchText: string): any[] {
        if (this.isObjNull(items)) return [-1];
        if (this.isObjNull(searchText)) return items;
        this.searchKeyword = searchText.toLowerCase();
        this.Result = items.filter(o => this.checkAgainstProperty(o.name));
        if (this.Result.length === 0) {
            return [-1];
        }
        return this.Result;
    }

    private checkAgainstProperty(property: any): boolean {
        let value: boolean = false;

        if (!this.isNullOrWhiteSpace(property)) {
            if (property.toLowerCase().indexOf(this.searchKeyword.toLowerCase()) >= 0) {
                value = true;
            }
        }

        return value;
    }

    public isObjNull(obj: any, isNumber = false): boolean {
        let value: boolean = true;

        if (!isNumber && obj && obj != undefined && obj != null)
            value = false;
        else if (isNumber && obj != undefined && obj != null)
            value = false;

        return value;
    }

    public isNullOrWhiteSpace(obj: string): boolean {
        let value: boolean = true;

        if (!this.isObjNull(obj) && obj.trim() != "")
            value = false;

        return value;
    }
}

app.module.ts

import { SearchPipe } from './search.pipe'


 declarations: [
    SearchPipe
 ]

Here is the complete solution worked perfect with no data found. screenshot

Sajeetharan · Accepted Answer · 2018-06-20 12:19:50Z

0

You need to use ngModel instead of model

 template: `<input [(ngModel)]="query" type="text" />

answered Jun 20, 2018 at 12:19

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

GonnaHack Over a year ago

Yeah I have changed but it is not showing serch bar also, I don't know why

Sajeetharan Over a year ago

you need to to debug and see

Sajeetharan Over a year ago

@GonnaHack stackblitz.com/edit/…

Collectives™ on Stack Overflow

Angular search filter is not working in Datatable

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related