Question

我正在使用Angular 7和Angular DataTables，即“角度方式”。我想为每列都设置一个过滤器，例如“单个列搜索”-> https://l-lin.github.io/angular-datatables/#/advanced/individual-column-filtering，在那里显示为“不是角度方式”。

我尝试将“角度方式”（https://l-lin.github.io/angular-datatables/#/basic/angular-way）与“其他方式”组合使用，但是过滤器无法正常工作。仅右上角的全局过滤器有效。似乎没有列引用到过滤器。

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>

我希望这些过滤器可以像全局过滤器一样工作，但是它们不会做出反应。

我不相信我是第一个想要尝试这个的人。但不幸的是我找不到任何解决方案。我发现了

Answer 1

今天，在Angular Datatables示例的官方文档中出现了一个错误 单个列搜索 ，如果有人需要它，我会回答。

您可以查看官方文档DataTables

有必要添加id来标识要由数据表搜索的列号

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

作为奖励，我增加了防抖功能，以防止发生多个后端呼叫，就像我在我的服务器端处于活动状态一样。

信用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);
          });

      });
    });
  }

Answer 2

我遇到了同样的错误“列方法”类型中不存在属性“列”，这是我解决的方法：

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();
        }
      });
    });
  });

有没有一种方法可以对“ Angular Datatables”使用带有“ Angular Way”的每一列过滤器？

2 个答案: