Question

我正在尝试在Angular数据表的顶部添加一个搜索过滤器（我现在对它的位置不太担心）。我正在使用Angular-6数据表（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

您可以使用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.

Answer 3

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

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

Component.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 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;
    }
}

将搜索过滤器添加到Angular-6数据表

4 个答案: