表填充后仍然存在“未找到匹配记录”答案

【问题标题】："No matching records found" remains after table population表填充后仍然存在“未找到匹配记录”
【发布时间】：2016-05-13 12:34:32
【问题描述】：

即使数据已加载，“未找到匹配记录”行仍保留在我的表中。

表定义如下：

<table  datatable dt-options="gvc.dtOptions" class="table table-striped">
<thead>
<tr>
    <th data-priority="1">Alert Time</th>
    <th data-priority="2">Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="alert in gvc.recentAlerts">
    <td>{{alert.alert_time}}</td>
    <td>{{alert.sent_text}}</td>
</tr>
</tbody>

而控制器中的dtOptions如下：

    self.dtOptions = DTOptionsBuilder.newOptions()
  .withDOM('t')
  .withOption('scrollY', '200px')
  .withOption('scrollCollapse', true)
  .withOption('paging', false)
  .withOption('bSort', false)
  .withOption('responsive', true);

关于它为什么保留的任何想法？

【问题讨论】：

尝试为table 设置datatable="ng" 属性，参见angular way。
@Gyrocode.com 100% 正确，很容易复制案例。尝试在其中一列中排序，所有行都会消失，因为数据表不知道数据 - 它不知道角度已经呈现了表格。
Cheers @Gyrocode.com 这已经解决了这个问题。
你试过datatable.draw()方法吗？

标签： javascript datatables angular-datatables

【解决方案1】：

如果你使用的是 Angular2 或更高版本，组件级 SCSS 或 CSS（非全局级），

::ng-deep table.dataTable td.dataTables_empty {
            display: none;
        }

【讨论】：

【解决方案2】：

按照说明将以下代码放在 src/styles.css 上（即您的全局样式）

  .dataTables_empty {
      display: none;
    }

【讨论】：

【解决方案3】：

对于 Angular，在数据从后端到达后，使用它来删除“未找到匹配的记录”

      // Remove "No matching records found" 
      if (this.dtElement && this.sellers.length > 0) {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
          // dtInstance.on('draw.dt', function () {
          if ($('.dataTables_empty').length > 0) {
            $('.dataTables_empty').remove();
          }
          // });
        });
      }

【讨论】：

【解决方案4】：

DataTables 在处理来自服务的 API 响应数据时存在一些问题。因此，试试这个简单的解决方案：

仅当您有数据时才加载您的表格。我有一个 Resources 数组，并且在 Table HTML 中放置了一个 *ngIf 条件：

<table *ngIf="Resources !== undefined"  datatable class="table table-bordered">
 <thead>
  <tr></tr>
 </thead>
 <tbody>
  <tr></tr>
 </tbody>
</table>

【讨论】：