Empty table - "No matching records found" in angular 6

[sastri448]

Hi,

I followed your tutorial (https://l-lin.github.io/angular-datatables/#/basic/server-side-angular-way) except the styles because if search something, then no records found we must show the notification message.

Everything working fine, but by default I am getting the message "No matching records found" even though I have records. Can you please help me to solve this issue.

Environment

- node version: ~8.9.4
- angular version: ^6.0.3
- angular-cli version: ~6.0.7
- jquery version: ^3.3.2
- datatables version: ^1.10.11
- angular-datatables version: ^6.0.0

Thank you,
Peri

[ussamoo]

Same issue here!

Found a work around but sure this is not the best solution.

ngAfterViewInit(): void {

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.on( 'draw.dt', function () {
      if($('.dataTables_empty').length > 0)
      {
        $('.dataTables_empty').remove();
      }
    });
  
    });
  } 

[sastri448]

Thank you for the solution but sure this is a temp fix. We can wait for "l-lin" reply for this issue.

Thank you.

[l-lin]

You might want to add the css style like in this example:

.dataTables_empty {
  display: none;
}

and display your own message if there is no record:

<tr *ngIf="persons?.length == 0">
      <td colspan="3" class="no-data-available">No data!</td>
</tr>

[nathan-douds-cc]

Any word on a real fix here? Both solutions are ok, but it seems like the package should handle this just fine out of the box.

[sastri448]

Hi l-lin, using is styles fine for initial load. when I want to use the search box for filter the rows its not showing records not found OR no data .

from the example
https://l-lin.github.io/angular-datatables/#/basic/server-side-angular-way

I searched the "444444" text in the box, got no message or nothing.

[wlumetsberger]

Hi I-lin, i tried to handle the issue mentioned above with the workaround in your tutorial, but there are problems if anyone changes the filter in state of no data. See Gif from your Tutorial-Site. Is there any workaround or solution to fix this bug?

One possible Solution which is ugly but works for my case is to use a second body

<tbody *ngIf="items?.length > 0">
            <tr *ngFor="let item of items">
              <td data-data="id">{{ item.id }} </td>
              <td data-data="name">{{ item.name }}</td>
              <td data-data="description">{{ item.description }}</td>
              <td data-data="actions">
                <button class="btn btn-primary" id="editItem" type="button" (click)="editItem(item)" title="bearbeiten">
                  <i class="fa fa-edit"></i>
                </button>
                <button class="btn btn-danger" id="editItem" type="button" (click)="deleteItem(item)" title="löschen">
                  <i class="fa fa-trash-o"></i>
                </button>
              </td>
            </tr>
          </tbody>
          <tbody *ngIf="items?.length == 0">
            <tr>
              <td class="no-data-available" colspan="4">Keine Einträge vorhanden!</td>
            </tr>
          </tbody>

[anshulCoder]

Hi all,
I was also facing these problem so I decided to debug the problem instead of going for another plugin, here's what the problem is and solution for it:
Problem (note: i'm using datatable plugin as directive only):
when table is simply added in html without any data, datatable directive initializes it as empty rows which doesn't change even after the data is filled via promise or any other ajax technique, and that's why table shows "no data" when any action is performed on table.

Solution:

• I wrote this simple hack to fix the problem, currently I have 3 DT's on same page so feel free to ignore the index positions. (turns out need a bigger tweak to make it work for second time added the update)

if (this.tablesInitialised[2]) {
        //second time
        this.datatableElement.forEach((dtElement: DataTableDirective, index: number) => {
          if (index === 2) {
            if (typeof dtElement.dtInstance !== 'undefined') {
              dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
                dtInstance.clear();
                dtInstance.destroy();
              });
            }
          }
        });
        this.unscoredData = unscored;
        this.dtTrigger2.next();
      } else {
        //first time
        this.tablesInitialised[2] = true;
        this.unscoredData = unscored;
        let catInterval = setInterval(() => {
          if (document.querySelectorAll('#category-tab tbody tr').length > 0) {
            clearInterval(catInterval);
            setTimeout(() => {
              this.datatableElement.forEach((dtElement: DataTableDirective, index: number) => {
                if (index === 2) {
                  if (typeof dtElement.dtInstance !== 'undefined') {
                    dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
                      dtInstance.clear();
                      dtInstance.destroy();
                    });
                  }
                }
              });
              this.dtTrigger2.next();
            }, 1000);
          }
        }, 500);
      }

write this above code when the new data is available in table.
P.S. put <table *ngIf="allCustomerData.length>0"> to avoid table initialization with 0 rows.

[rbrijesh]

Same issue here!

Found a work around but sure this is not the best solution.

ngAfterViewInit(): void {

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.on( 'draw.dt', function () {
      if($('.dataTables_empty').length > 0)
      {
        $('.dataTables_empty').remove();
      }
    });
  
    });
  } 

Thank you @ussamoo it's working and I successfully removed the “No matching records found” from my table.