单个列搜索（文本输入）数据表角度 5答案

【问题标题】：Individual column searching (text inputs) datatable angular 5单个列搜索（文本输入）数据表角度 5
【发布时间】：2019-03-10 00:50:56
【问题描述】：

如何在角度 5 中使用此选项 Individual column searching 来处理数据表

请问我该如何解决？

这是我的 TS 文件

dtOptions: DaaTables.Settings = {};

ngOnInit() {
    console.log(this.items)
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      ordering:true,
      orderCellsTop:true,
    };
    this.service.getUsers().subscribe(users=>{
      this.users=users;
      this.dtTrigger.next();
      console.log(this.users)

    });

  }

这是我的 HTML 文件

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
      <thead>
      <tr>
        <th><input type="text" class="form-control"
                   placeholder="ID" /></th>
        <th><input type="text" class="form-control"
                   placeholder="name" /></th>
        <th><input type="text" class="form-control"
                   placeholder="username" /></th>
      </tr>
      <tr>
        <th>ID</th>
        <th>name</th>
        <th>username</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let user of users">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.username }}</td>
      </tr>
      </tbody>
    </table>

【问题讨论】：

我点击了你的链接，发现 DataTable 不适用于 Angular。您可以使用 Kendo Angular UI、Ag-grid 或任何其他为数据表提供 Angular 模块的工具

标签： angular typescript datatable datatables

【解决方案1】：

我就是这样做的：

 ngAfterViewInit() {
        console.log('ContactsComponent - ngAfterViewInit()');
        this.dtTrigger.next();
        this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
            dtInstance.columns().every(function () {
                const that = this;
                $('input', this.footer()).on('keyup change', function () {
                    console.log('search(): ' + that.search());
                    console.log('value: ' + this['value']);
                    if (that.search() !== this['value']) {
                        that.search(this['value'])
                            .draw();
                    }
                });
            });
  });

在 HTML 文件中，添加名称 = search-yourfield 的页脚：

<tfoot>
    <tr>
       <th>Sélection</th>
       <th><input type="text" placeholder="Search ID" name="search-idaicontact"/></th>
       <th><input type="text" placeholder="Search first name" name="search-identifiant"/></th>
       <th><input type="text" placeholder="Search last name" name="search-nom"/></th>
       <th><input type="text" placeholder="Search last name" name="search-prenom"/></th>
       <th>Action</th>
   </tr>
</tfoot>

【讨论】：