Question

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

请问该如何解决？

这是我的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>

Answer 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文件中，将页脚添加为name = 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>

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

这是我的HTML文件

1 个答案: