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

Question

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

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

我只想能够搜索“名称”列。 请协助。

Answer 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)'>

Answer 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();




              }

            }

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

Answer 3

您可以使用主题和数组过滤器功能进行过滤。

在组件代码中：

data$ = new Subject<any>();

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

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

这是您的代码的运行编辑。

Answer 4

创建 3 个数组列表，即： rows =[]; permanentRows = []; temp = []; 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;
    }
}