javascript - "No matching records found" remains after table population - Stack Overflow

admin管理员组

文章数量:1300186

The "No matching records found" row remains on my table, even though data has been loaded.

The table is defined as follows:

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

And the dtOptions as follows in the controller:

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

Any ideas as to why it is remaining?

The "No matching records found" row remains on my table, even though data has been loaded.

The table is defined as follows:

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

And the dtOptions as follows in the controller:

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

Any ideas as to why it is remaining?

• javascript
• datatables
• angular-datatables

Share Improve this question Follow asked May 13, 2016 at 12:34 Donal MDonal M 1,31522 gold badges1212 silver badges2323 bronze badges 4

• 2 Try setting datatable="ng" attribute for a table, see angular way. – Gyrocode. Commented May 13, 2016 at 12:45
• @Gyrocode. is 100% right, it is easy to replicate the case. Try to sort in one of the columns, all rows disappear because datatables not is aware of the data - it does not know angular has rendered the table. – davidkonrad Commented May 13, 2016 at 12:55
• Cheers @Gyrocode. That has fixed the issue. – Donal M Commented May 13, 2016 at 13:16
• Have you tried datatable.draw() method? – Lucky Commented May 15, 2016 at 14:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

If you are you using Angular2 or higher, Component level SCSS or CSS (Not global level ),

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

As per instruction put following code on src/styles.css (i.e. your global style)

  .dataTables_empty {
      display: none;
    } 

For angular use this to remove "No matching records found" after data arrived from backend

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

There is some issue with DataTables in handling API Response data from Services. Hence, try this simple solution:

Load your table only if you have data. I was having a Resources Array and I had put an *ngIf condition in Table HTML:

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

本文标签： javascriptquotNo matching records foundquot remains after table populationStack Overflow