将搜索过滤器添加到 Angular-6-datatable答案

【问题标题】：Add search filter to Angular-6-datatable将搜索过滤器添加到 Angular-6-datatable
【发布时间】：2020-05-02 14:05:27
【问题描述】：

我正在尝试在我的 Angular 数据表顶部添加一个搜索过滤器（我现在不太在意它的定位）。我正在使用 Angular-6-datatable (https://www.npmjs.com/package/angular-6-datatable) 和引导程序。我在这里创建了一个 stackblitz 项目。

https://stackblitz.com/edit/angular-utd8cc

我只想能够搜索“名称”列。请帮忙。

【问题讨论】：

标签： angular

【解决方案1】：

只需为过滤后的数据添加一个单独的数组并将表绑定到它：

ts 文件

search(term: string) {
    if(!term) {
      this.filterData = this.data;
    } else {
      this.filterData = this.data.filter(x => 
         x.name.trim().toLowerCase().includes(term.trim().toLowerCase())
      );
    }
  }

html

<input type="text" (keyup)='search($event.target.value)'>

【讨论】：

它不会删除任何行
@NimaHakimi 嗨试过这段代码是有效的，但是在执行任何其他按钮点击之后数组中的任何更改之后，这不会触发..你能帮我解决这个问题吗？

【解决方案2】：

我认为您的要求是数据表中的自定义过滤器。

组件.html

        <form (ngSubmit)="filterById($event)">
          <label> 
            First Name
            <input type="text" name="first_name" id="first_name" />


          </label>
          <label>
            Last Name
            <input type="text" name="last_name" id="last_name"/>



          <button class="btn btn-primary" type="submit">Search</button>
        </form>
        <br />

        <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

组件.ts

                export class DatatableComponent implements OnInit {
              @ViewChild(DataTableDirective)
              datatableElement: DataTableDirective;
              private new_url = 'service_url';
              Search$: Observable<Person>;

              constructor(private personservice: PersonService, private httpClient: HttpClient) { }
              send_data_service: any = {};
              dtOptions: DataTables.Settings = {};




              ngOnInit(): void {

               this.dtOptions = {
                  ajax: this.new_url,
                  columns: [{
                    title: 'id',
                    data: 'id'
                  }, {
                    title: 'first_name',
                    data: 'first_name'
                  }, {
                    title: 'last_name',
                    data: 'last_name',
                  },

                  ]

                };

              }


              filterById(event: any) {



                const first_name = event.target.first_name.value;
                const last_name = event.target.last_name.value;

                this.send_data_service = { 'first_name': first_name, 'last_name': last_name };
                  this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
                  this.personservice.searchData(this.send_data_service)
                    .subscribe(data =>
                      this.send_data_service = data);

                  dtInstance.search(first_name).draw();




              }

            }

您可以在数据表中实现自定义过滤器。

【讨论】：

谢谢，以后试试这个

【解决方案3】：

您可以使用Subject 和the Array filter function 进行过滤。

在组件代码中：

data$ = new Subject<any>();

filter(search) {
    this.data$.next(this.data.filter(_ => _.name.includes(search)));
}

在模板中只需将data 替换为data$ | async。

Here is a running edit of your code.

【讨论】：

【解决方案4】：

创建 3 个数组列表，即：rows =[]; permanentRows = []; temp = [];

从 API 获取数据时，初始化两个数组，即：

get_data_from_api(data=>{
    this.rows = data,
    this.permanentRows = data
 }
 )

updateFilter(event) {
    const val = event.target.value.toLowerCase();
    if(val) {
        this.temp = this.rows;
        // filter our data
        const temp = this.temp.filter(function (d) {
          return ( d.name.toLowerCase().indexOf(val) !== -1 || d.email.toLowerCase().indexOf(val) !== -1 || !val);
        });
        // update the rows
        this.rows = temp;            
    }
    else
    {
        this.rows = this.permanentRows;
    }
}

【讨论】：