Wie wird die serverseitige Option in Angular DataTables mit dem Angular Way-Beispiel verwendet?

Question

Ich versuche Angular DataTables mit der Option server side processing zu verwenden, aber wenn ich versuche, es in ihrem "Angular way example" zu aktivieren, wird nur die erste Anfrage gerendert, die folgenden Anfragen (Paging, Bestellung, Suche) werden gesendet, aber sie werden nie aktualisiert Der Tisch.

Answer 1

Nach ein wenig graben, fand ich eine nicht verwandte user contributed note, die vorschlägt, dass Sie die Option ajax mit Ihrer eigenen Funktion überschreiben, um den Server-Seitenaufruf zu behandeln.

Der Trick besteht darin, ein leeres Array an den DataTables-Callback zurückzugeben, damit es seinen Renderer nicht zum Rendern der Tabelle verwendet. Das wird von Angular erledigt. Es ist auch eine gute Idee, die Spaltennamen auf dem Server anzugeben.

Da DataTables denkt, dass keine Zeilen angezeigt werden, wird die Meldung "Keine Daten verfügbar" angezeigt. Am einfachsten ist es, es mit CSS zu verstecken. Sie können es auf Ihre global styles.css hinzufügen:

.dataTables_empty { 
    display: none; 
} 

es dann zeigen sich in der Vorlage:

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

hier ist also der vollständige Code. Getestet mit Angular 5.0.0, datatables.net 1.10.16 und 5.0.0 Winkel-Datentabellen:

Winkel-Wege-server-side.component.ts

import { Component, OnInit } from '@angular/core'; 
import { HttpClient, HttpResponse } from '@angular/common/http'; 
import { DataTablesResponse } from '../datatables/datatables-response'; 
import { Person } from './person'; 

@Component({ 
    selector: 'app-angular-way-server-side', 
    templateUrl: 'angular-way-server-side.component.html', 
    styleUrls: ['angular-way-server-side.component.css'], 
}) 
export class AngularWayServerSideComponent implements OnInit { 
    dtOptions: DataTables.Settings = {}; 
    persons: Person[]; 

    constructor(private http: HttpClient) { } 

    ngOnInit(): void { 
     var that = this; 

     this.dtOptions = { 
      pagingType: 'full_numbers', 
      serverSide: true, 
      processing: true, 
      ajax: (dataTablesParameters: any, callback) => { 
       that.http 
        .post<DataTablesResponse>('/api/Persons', dataTablesParameters, {}) 
        .subscribe(resp => { 
         that.persons = resp.data; 

         callback({ 
          recordsTotal: resp.recordsTotal, 
          recordsFiltered: resp.recordsFiltered, 
          data: [], 
         }); 
        }); 
      }, 
      columns: [ 
       { data: "id" }, 
       { data: "firstName" }, 
       { data: "lastName" }, 
      ], 
     }; 
    } 
} 

Winkel-Weg- Server-side.component.html

<table datatable [dtOptions]="dtOptions" class="row-border hover"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>First name</th> 
      <th>Last name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let person of persons"> 
      <td>{{ person.id }}</td> 
      <td>{{ person.firstName }}</td> 
      <td>{{ person.lastName }}</td> 
     </tr> 
     <tr *ngIf="persons?.length == 0"> 
      <td colspan="3" class="no-data-available">No data!</td> 
     </tr> 
    </tbody> 
</table> 

Winkel-Wege-server-side.component.css

.no-data-available { 
    text-align: center; 
} 

person.ts

export class Person { 
    id: number; 
    firstName: string; 
    lastName: string; 
} 

Datentabellen-response.ts

export class DataTablesResponse { 
    data: any[]; 
    draw: number; 
    recordsFiltered: number; 
    recordsTotal: number; 
} 

src/styles.css

.dataTables_empty { 
    display: none; 
}