Как использовать опцию на стороне сервера в Angular DataTables с примером Angular way?

Question

Я пытаюсь использовать Angular DataTables с параметром обработки на стороне сервера, но когда я пытаюсь включить его в своем " примере Angular way ", обрабатывается только первый запрос, последующие запросы (подкачка, упорядочивание, поиск) отправляются, но они никогда не обновляют таблицу.

Answer 1

Немного покопавшись, я нашел несвязанную заметку, предложенную пользователем, которая предлагает переопределить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" class="no-data-available">No data!</td>
</tr>

Итак, вот полный код. Протестировано с Angular 5.0.0, datatables.net 1.10.16 и angular-datatables 5.0.0:

Угловое-полосная-сервер-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" },
            ],
        };
    }
}

Угловой-полосной-сервер 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>

Угловой-полосной-сервер 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;
}

---

Серверная часть реализована почти так же, как если бы вы использовали DataTables с JavaScript/jQuery. Вы можете увидеть очень простой пример реализации в PHP.