如何通过Angular方式示例在Angular DataTables中使用服务器端选项？

经过一番挖掘，我发现了一个与用户无关的注释，建议您

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" >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" >    <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" >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

.dataTables_empty {    display: none;}

服务器端的实现方式几乎与使用带Javascript /
jQuery的数据表的方式相同。您可以在PHP中看到一个非常简单的示例实现。