如何使用 Angular DataTables 中的服务器端选项与 Angular 方式示例？

Question

我正在尝试使用 Angular DataTables with the server side processing option, but when I try to enable it in their "Angular way example"，仅呈现第一个请求，发送后续请求（分页、排序、搜索），但它们从不更新 table。

Answer 1

经过一番挖掘，我发现了一个不相关的 user contributed note that suggests that you override the ajax 选项，其中包含您自己的函数来处理服务器端调用。

这里的技巧是 return 一个空数组给 DataTables 回调，这样它就不会使用它的渲染器来渲染 table。这将由 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 认为没有要显示的行，因此会显示 "No data available" 消息。最简单的处理方法是用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;
}

数据tables-response.ts

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

src/styles.css

.dataTables_empty {
    display: none;
}

服务器端的实现方式与您在 JavaScript/jQuery 中使用 DataTables 的方式几乎相同。可以看到一个very simple sample implementation in PHP.

如何使用 Angular DataTables 中的服务器端选项与 Angular 方式示例？

How to use server side option in Angular DataTables with the Angular way example?

ajax

datatables

angular-datatables

angular