角搜索过滤器在数据表中不起作用 [英] Angular search filter is not working in Datatable

问题描述

我已经在Angular JS中创建了DataTable。它工作正常，但现在我正在使用角度管道实施搜索过滤器。对于这种情况，我创建了以下代码

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: "[e-mail]", age: "50" },
    { name: "Jojo", email: "[e-mail]", age: "15" },
    { name: "Andre", email: "[e-mail]", 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

推荐答案

HTML文件

<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>

打字稿文件

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

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

SearchPipe.ts

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

app.module.ts

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


 declarations: [
    SearchPipe
 ]

这里是没有数据的完美解决方案。屏幕快照

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

这篇关于角搜索过滤器在数据表中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！