Wie verwenden Sie server-side-option in Eckigen DataTables mit den Eckigen Weg Beispiel?

Nach ein wenig Graben, fand ich ein nicht user contributed note, die vorschlägt, dass Sie das überschreiben der ajax option mit Ihrem eigenen Funktion zur Verarbeitung der server-Seite aufrufen.

Der trick hier ist, gibt ein leeres array zurück, um die DataTables-callback, damit es nicht zu verwenden, dessen renderer zum Rendern der Tabelle. Das wird durch die Eckigen. Es ist auch eine gute Idee, geben Sie die Spalten-Namen in die 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" },
        ],
    };
}

Seit DataTables denken, es gibt keine Zeilen-display, es zeigt die "Keine Daten verfügbar" angezeigt. Der einfachste Weg, es zu handhaben ist, um es zu verstecken mit CSS. Sie können es hinzufügen, um Ihre Globale Stile.css:

.dataTables_empty {
    display: none;
}

es dann zeigen sich in der Vorlage:

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

So, hier ist der komplette code. Getestet mit Eckigen 5.0.0, datatables.net 1.10.16 und eckig-datatables-5.0.0:

eckig-Wege-server-Seite.Komponente.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>

eckig-Wege-server-Seite.Komponente.css

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

person.ts

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

datatables-Reaktion.ts

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

src/styles.css

.dataTables_empty {
    display: none;
}

Server-Seite implementiert ist so ziemlich die gleiche Weise, als würden Sie DataTables-JavaScript/jQuery. Sie können sehen, eine sehr einfache Beispiel-Implementierung in PHP.