Is there a way to use the Angular Datatables with a filter for each column the "angular way"?

Question

I'm using Angular 7 and Angular DataTables, "the angular way". I want to have a filter for each column, like "Individual column searching" -> https://l-lin.github.io/angular-datatables/#/advanced/individual-column-filtering, which is shown there "not the angular way".

I tried to combine "the angular way"(https://l-lin.github.io/angular-datatables/#/basic/angular-way) with the "other way", but the filter is not working. Only the global filter in the right top corner is working. It looks like there is no reference of the columns to the filters.

export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};

  users: User[] = [];
  dtTrigger: Subject<User> = new Subject();

  constructor(private http: HttpClient) {}
  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };
    this.http.get<User[]>('https://l-lin.github.io/angular-datatables/data/data.json')
      .subscribe(users => {
        this.users = users;
        this.dtTrigger.next();
      });
  }

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

<table datatable="ng" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <tfoot>
  <tr>
    <th><input type="text" placeholder="Search ID" name="search-id"/></th>
    <th><input type="text" placeholder="Search first name" name="search-first-name"/></th>
    <th><input type="text" placeholder="Search last name" name="search-last-name"/></th>
  </tr>
  </tfoot>
  <thead>
  <tr>
    <th>ID</th>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let user of users.data">
    <td>{{ user.id }}</td>
    <td>{{ user.firstName }}</td>
    <td>{{ user.lastName }}</td>
  </tr>
  </tbody>
</table>

I expect that the filters will work like the global filter, but they don't react.

I don't believe that I'm the first one who wants to try this. But unfortunately I can't find any solution. I found

CViloria · Answer 1 · 2020-02-28T12:01:16.357

Today I got an error in the official documentation of Angular Datatables example Individual column searching, I answer if anyone else needs it.

you can check the official documentation DataTables

It is necessary to add id to identify the column number to be searched by datatable

<tfoot>
      <tr>
       <th><input type="text" id="0" placeholder="Search ID" name="search-id"/></th>
       <th><input type="text" placeholder="Search name" id="1" name="search-first-name"/></th>
       <th><input type="text" placeholder="Search last name" id="2" name="search-last-name"/></th>
  </tr>
</tfoot>

In ts As a bonus and added a debounce to prevent multi backend calls as is my case I have server side active.

Credit Quetion stackoverflow

globalTimeout = null;

....

  ngAfterViewInit(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.columns().every(function () {


          const that = this;
          $('input', this.footer()).on('keyup change', function () {

            if (that.globalTimeout != null) {
              clearTimeout(that.globalTimeout);
            }
            that.globalTimeout = setTimeout(() => {
              that.globalTimeout = null;
              if (that.column(this['id']).search() !== this['value']) {
                that
                  .column(this['id'])
                  .search(this['value'])
                  .draw();
              }
            }, 2700);
          });

      });
    });
  }

I have added the code but giving the error Property 'column' does not exist on type 'ColumnMethods' — Somnath Rokade, Jan 19 '21 at 12:49
If you want you can replicate in stackblitz or repository and I will help you @SomnathRokade — CViloria, Feb 11 '21 at 21:58
Why is the delay 2700? It works with less then this in my case... I also had to add another constant to get the script working. the global timeout refers to a variable on class level, so I had to add a const thot = this in the beginnen of the function. And refer thot.globalTimeout. For the column I kept the that this is referring to the Datatable columnmethods. But thanks for the help. — Mark, Jan 30 '23 at 10:00

score 0 · Answer 2 · answered May 31 '21 at 04:27

I had the same error Property 'column' does not exist in type 'Column methods', this is how I solved it:

this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.columns().every(function () {
      $('input', this.footer()).on('keyup change', function () {
        if (dtInstance.column(this['id']).search() !== this['value']) {
          dtInstance
            .column(this['id'])
            .search(this['value'])
            .draw();
        }
      });
    });
  });

Is there a way to use the Angular Datatables with a filter for each column the "angular way"?

2 Answers2