我正在尝试将Angular DataTables与服务器端处理选项一起使用,但是当我尝试在其“ Angular方式示例 ”中启用它时,仅呈现第一个请求,随后的请求(分页,排序,搜索)被发送,他们从不更新表。
经过一番挖掘,我发现了一个与用户无关的注释,建议您ajax使用自己的函数覆盖该选项以处理服务器端调用。
ajax
这里的技巧是将一个空数组返回到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隐藏它。您可以将其添加到您的全局styles.css中
.dataTables_empty { display: none; }
然后在模板中自己显示:
<tr *ngIf="persons?.length == 0"> <td colspan="3" class="no-data-available">No data!</td> </tr>
这是完整的代码。在Angular 5.0.0,datatables.net 1.10.16和angular-datatables 5.0.0中进行了测试:
angular-way-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" }, ], }; } }
angular-way-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>
angular-way-server-side.component.css
.no-data-available { text-align: center; }
人
export class Person { id: number; firstName: string; lastName: string; }
数据表响应
export class DataTablesResponse { data: any[]; draw: number; recordsFiltered: number; recordsTotal: number; }
src / styles.css
服务器端的实现方式几乎与使用带JavaScript / jQuery的数据表的方式相同。您可以在PHP中看到一个非常简单的示例实现。