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

Question

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

该表定义如下：

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

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

Answer 1

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

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

Answer 2

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

  .dataTables_empty {
      display: none;
    } 

Answer 3

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

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

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

Answer 4

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

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