如何使用 Angular 方式示例在 Angular DataTables 中使用服务器端选项? [英] How to use server side option in Angular DataTables with the Angular way example?

问题描述

我正在尝试将 Angular DataTables 与 服务器端处理 选项，但是当我尝试在他们的Angular way example"，只渲染第一个请求，后续请求(分页、排序、搜索)被发送，但它们从不更新表.

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.

推荐答案

经过一番挖掘，我发现了一个无关的 用户贡献的注释，建议您覆盖 ajax 选项和你自己的函数来处理服务器端调用.

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.

这里的技巧是向 DataTables 回调返回一个空数组，因此它不会使用其渲染器来渲染表.这将由 Angular 完成.为服务器指定列名也是一个好主意.

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.

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:

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

这里是完整的代码.使用 Angular 5.0.0、datatables.net 1.10.16 和 angular-datatables 5.0.0 进行测试:

So here's the complete code. Tested with Angular 5.0.0, datatables.net 1.10.16 and 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;
}

<小时>

服务器端的实现方式与您在 JavaScript/jQuery 中使用 DataTables 的方式几乎相同.你可以看到一个非常简单的 PHP 示例实现.

这篇关于如何使用 Angular 方式示例在 Angular DataTables 中使用服务器端选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！