Angular Dataの例でサーバー側オプションをAngular DataTablesで使用するにはどうすればよいですか？

Question

私はserver side processingオプションでAngular DataTablesを使用しようとしていますが、 "Angular way example"で有効にしようとすると、最初の要求のみレンダリングされ、後続の要求（ページング、順序付け、検索）テーブル。

Answer 1

ちょっと掘り下げた後、サーバー側の呼び出しを処理する独自の機能でajaxオプションを上書きすることを示唆している無関係なuser contributed noteが見つかりました。

ここで、空の配列をDataTablesコールバックに戻すのは、レンダラーを使用してテーブルをレンダリングしないことです。これはAngularによって行われます。また、列名をサーバーに指定することもお勧めします。

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" }, 
     ], 
    }; 
} 

DataTableには表示する行がないと考えられるため、「データなし」というメッセージが表示されます。それを処理する最も簡単な方法は、CSSでそれを隠すことです。あなたのglobal styles.cssにそれを追加することができます。

.dataTables_empty { 
    display: none; 
} 

、テンプレートでそれを自分で示しています

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

だから、ここで完全なコードです。アンギュラ5.0.0でテストされ、datatables.net 1.10.16と角度-のDataTable 5.0.0：

角度ウェイ・サーバ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" }, 
      ], 
     }; 
    } 
} 

角度-way-サーバー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> 

角度ウェイ・サーバside.component.css

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

person.ts

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

のDataTable-response.ts

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

のsrc/Styles.cssを

.dataTables_empty { 
    display: none; 
}