我正在尝试使用 Angular DataTables与 server side processing选项,但是当我尝试在他们的“Angular way example”中启用它时,只呈现第一个请求,发送后续请求(分页、排序、搜索),但它们从不更新表。
最佳答案
经过一番挖掘,我发现了一个不相关的 user contributed note这表明您覆盖 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 隐藏它。您可以将其添加到您的 global 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;
}
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;
}
服务器端的实现方式与将 DataTables 与 JavaScript/jQuery 一起使用的方式几乎相同。你可以看到一个 very simple sample implementation in PHP .
关于ajax - 如何使用 Angular 方式示例在 Angular DataTables 中使用服务器端选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48030408/