Поиск по отдельному столбцу (ввод текста) datatable angular 5 - PullRequest
Новая
       10

Поиск по отдельному столбцу (ввод текста) datatable angular 5

0 голосов
/ 04 октября 2018

как я могу использовать эту опцию Поиск в отдельном столбце для данных в угловых значениях 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>

1 Ответ

0 голосов
/ 05 ноября 2018

Вот как я это делаю: 

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