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

【问题标题】：Angular JQuery DataTable, Delay search untill more than one character has been typedAngular JQuery DataTable，延迟搜索直到输入多个字符
【发布时间】：2019-02-27 02:25:01
【问题描述】：

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 库为我提供解决方案。排序和简单搜索效果很好。请解决方法

【问题讨论】：

标签： jquery search datatables angular6

【解决方案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，您可能会遇到冲突。没有其他解决方法。

【讨论】：

感谢您的帮助。现在我无法在搜索字段中获取键入的文本。在您的代码中 this.value 给出错误“属性 'value' 在类型 'HTMLElement' 上不存在”
您正在以$('.dataTables_filter input')为目标，而您没有使用箭头函数？你是在initComplete 回调中执行此操作吗？请改用$('.dataTables_filter input').val()。它适用于普通的 jQuery DataTables 场景，看起来很奇怪 this 的类型为 HTMLElement，它应该是 HTMLInputElement。感觉就像你在做一些有创意的事情。

【解决方案2】：

现在我终于用逻辑做到了：

$('.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 ( (($('.dataTables_filter input').val())['length']) > 1) {
        $.fn['dataTable'].tables({ api: true }).search($('.dataTables_filter input').val()).draw();
      }
      if ( (($('.dataTables_filter input').val())['length']) < 1) {

        $.fn['dataTable'].tables({ api: true }).search('').draw();
      }
     });

感谢您的帮助好友！

【讨论】：