如何在角度数据中使用服务器端选项和角度方式示例?

I'm trying to use Angular DataTables with the server side processing option, but when I try to enable it in their "Angular way example", only the first request gets rendered, the subsequent requests (paging, ordering, searching) are sent but they never update the table.

我尝试在服务器端处理选项中使用角数据，但是当我尝试在“角方式示例”中启用角数据时，只有第一个请求被呈现，随后的请求(分页、排序、搜索)被发送，但它们从不更新表。

1 个解决方案

#1

After a little digging, I found an unrelated user contributed note that suggests that you override the ajax option with your own function to handle the server side call.

在进行了一些挖掘之后，我发现了一个不相关的用户提供的提示，建议您使用自己的函数覆盖ajax选项来处理服务器端调用。

The trick here is to return an empty array to the DataTables callback, so it won't use its renderer to render the table. That will be done by Angular. It's also a good idea to specify the columns names to the server.

这里的诀窍是将一个空数组返回到DataTables回调，这样它就不会使用它的渲染器来呈现表。这是角的。为服务器指定列名称也是一个好主意。

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

Since DataTables will think there are no rows to display, it will show the "No data available" message. The simplest way to handle it is to hide it with CSS. You can add it to your global styles.css:

由于DataTables会认为没有行要显示，因此它将显示“无数据可用”消息。处理它的最简单方法是使用CSS隐藏它。您可以将其添加到您的全局样式。

.dataTables_empty {
    display: none;
}

then show it yourself in the template:

然后在模板中显示出来:

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

So here's the complete code. Tested with Angular 5.0.0, datatables.net 1.10.16 and angular-datatables 5.0.0:

这是完整的代码。测试的角度为5.0.0,datatables.net 1.10.16和Angular -datatable 5.0.0:

angular-way-server-side.component.ts

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

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

angular-way-server-side.component.css

.no-data-available {
    text-align: center;
}

person.ts

person.ts

export class Person {
    id: number;
    firstName: string;
    lastName: string;
}

datatables-response.ts

datatables-response.ts

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

src/styles.css

src / styles.css

.dataTables_empty {
    display: none;
}

#1