＆＃34;未找到匹配的记录＆＃34;表人口之后仍然存在

Question

＆＃34;找不到匹配的记录＆＃34;即使数据已加载，行仍保留在我的表中。

该表定义如下：

<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

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

  .dataTables_empty {
      display: none;
    } 

Answer 2

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

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

Answer 3

对于有角度的数据，用于从后端到达数据后删除“找不到匹配的记录”

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

Answer 4

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

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

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