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

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

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

谢谢您的帮忙！

Angular JQuery DataTable，延迟搜索，直到键入多个字符为止

详细信息##

2 个答案: