如何允许使用 ngx-datatable 进行多次搜索

Question

我正在使用这个 https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts 来帮助我在 table 中创建搜索。

我的目标是创建高级搜索：按性别和姓名值过滤

  rows = [
{ name: 'Austin', gender: 'Male', company: 'Swimlane' },
{ name: 'Dany', gender: 'Male', company: 'KFC' },
{ name: 'Molly', gender: 'Female', company: 'Burger King' },
];
columns = [
{ prop: 'name' },
{ name: 'Gender' },
{ name: 'Company' }
];

@ViewChild(DatatableComponent) table: DatatableComponent;

temp=[]

constructor() {
    this.temp = this.rows;
}

updateFilter(event) {
    const val = event.target.value.toLowerCase();

    const temp = this.temp.filter(function (d) {
        return d.name.toLowerCase().indexOf(val) !== -1 || !val;
    });

    this.rows = temp;
 }

 updateFilter1(event) {
  const val = event.target.value.toLowerCase();

  const temp = this.temp.filter(function (d) {
      return d.gender.toLowerCase().indexOf(val) !== -1 || !val;
  });
  this.rows = temp;
}

我只是复制了我的搜索，创建了第二个按性别过滤的功能。但是，这两个搜索是分开工作的（消除了另一个的限制），我不知道如何解决它。

在这里你可以找到我的 html :

<input
    type='text'
    style='padding:8px;margin:15px auto;width:30%;'
    placeholder='Type to filter the name column...'
    (keyup)='filterByName($event)'
  />
  <input
    type='text'
    style='padding:8px;margin:15px auto;width:30%;'
    placeholder='Type to filter the name column...'
    (keyup)='filterByGender($event)'
  />
  <ngx-datatable
    #table
    class='material'
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [limit]="10"
    [rows]='rows'>
  </ngx-datatable>

Answer 1

... // other vars you already have
previousNameFilter = ''
previousGenderFilter = ''

filterByName(event) {
  const filter = event.target.value
  this.previousNameFilter = filter
  this.temp = this.filterRows(filter, this.previousGenderFilter)
}

filterByGender(event) {
  const filter = event.target.value
  this.previousGenderFilter = filter
  this.temp = this.filterRows(this.previousNameFilter, filter)
}


filterRows(nameFilter, genderFilter): any[] {
  nameFilter = nameFilter.toLowerCase()
  genderFilter = genderFilter.toLowerCase()

  return this.rows.filter(row => {
    const isPartialNameMatch = row.name.toLowerCase().indexOf(nameFilter) !== -1 || !nameFilter
    const isPartialGenderMatch = row.gender.toLowerCase().indexOf(genderFilter) !== -1 || !genderFilter
    return isPartialNameMatch && isPartialGenderMatch
  });
}

Stackblitz used for testing

Answer 2

有点晚了，但这是一个部分匹配任何字段的通用函数。

updateFilter(event) {
    const input = event.target.value.toLowerCase();

    // filter our data
    if (input.length > 0) {
      const filtered = this.rows
        .filter(el =>
          Object.values(el).find(
            val =>
              val.toString()
                .toLowerCase()
                .indexOf(input) !== -1
          ) != undefined
        );
      this.filtered = [...filtered]
    } else {
      this.filtered = [...this.rows]
    }

    // update the rows
    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
  }

如何允许使用 ngx-datatable 进行多次搜索

How allow multiple search with ngx-datatable

ngx-datatable

angular