jquery - Angular JQuery DataTable，延迟搜索直到输入多个字符

Question

data.compnent.ts:

getData() {
    this._dServices.downloadData().subscribe((value) => this.data = value);
    setTimeout(function () {
      const table: any = $('#myTable');
      this.dataTable = table.DataTable({
        'paging': true,
        'ordering': true,
        'info': true,
        'columnDefs': [ {
          'targets': 2,
          'sortable': false
        } ]
      });
    }, 800);
  }

data.compnent.html:



<br>
<br>

<div class="container container-fluid">

  <div class="">
    <button class="btn btn-block btn-primary" (click)="getData()" > Get Started </button>
    <br>
      <table datatable dtOptions="dtOptions" class=" table row-border" id="myTable" >
        <thead>
        <tr>
          <th> Score </th>
          <th> News Title </th>
          <th> URL </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let a of data">
          <td>{{a.score}}</td>
          <td>{{a.title}}</td>
          <td>{{a.url}}</td>
        </tr>
        </tbody>
      </table>
  </div>
</div>

详细信息##

我想工作我的应用程序，因为搜索应该执行，直到用户输入多个字符，任何人都可以使用 jQuery DataTable 库为我提供解决方案。排序和简单搜索效果很好。请提供解决方案

Answer 1

除了重置内置事件处理程序并触发您自己的事件处理程序之外，您别无选择:

$('.dataTables_filter input')
  .off('keyup.DT search.DT input.DT paste.DT cut.DT')
  .on('keyup.DT search.DT input.DT paste.DT cut.DT', function(e) {
    if (this.value.length>1) $.fn.dataTable.tables({ api: true }).search(this.value).draw()
  })

在 DT 初始化之后执行此操作，例如在 initComplete 中:

this.dataTable = table.DataTable({
  initComplete: function() {
    //insert above code here
   }
   ...
})

但是由于这是 Angular 和 TS，你可能会遇到冲突。没有其他解决方法。