각도 데이터 예제에서 서버 측 옵션을 각도 방법으로 사용하는 방법은 무엇입니까?

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

DataTables는 표시 할 행이 없다고 생각하기 때문에 "사용 가능한 데이터 없음"메시지가 표시됩니다. 그것을 다루는 가장 간단한 방법은 CSS로 그것을 숨기는 것입니다. 당신은 당신의 global styles.css에 추가 할 수 있습니다 :

.dataTables_empty { 
    display: none; 
} 

다음 템플릿에서 직접 보여

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

그래서 여기에 전체 코드입니다.

각도 방향 - 서버 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" }, 
      ], 
     }; 
    } 
} 

각-방법 - : 각도 5.0.0, datatables.net 1.10.16 및 각-datatables 5.0.0 테스트 서버 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; 
} 

datatables-response.ts

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

SRC/styles.css가

.dataTables_empty { 
    display: none; 
}