如何通过 Angular 方式示例在 Angular DataTables 中使用服务器端选项？

Posted 2023-05-07

【中文标题】如何通过 Angular 方式示例在 Angular DataTables 中使用服务器端选项？

【英文标题】：How to use server side option in Angular DataTables with the Angular way example?

【发布时间】：2018-06-10 08:31:29

【问题描述】：

我正在尝试将Angular DataTables 与server side processing 选项一起使用，但是当我尝试在他们的“Angular way example”中启用它时，只会呈现第一个请求，随后的请求（分页、排序、搜索) 已发送，但它们从不更新表。

【参考方案1】：

经过一番挖掘，我发现了一个不相关的user contributed note，它建议您使用自己的函数覆盖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 隐藏它。您可以将其添加到您的global 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 测试：

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 的方式几乎相同。你可以看到very simple sample implementation in php。

【讨论】：

你能检查这个链接***.com/questions/47568013/…

它将如何检查服务器端的分页、排序等，你的 ajax 帖子的结构是什么以及相同的假定输出是什么..？

如果我也想使用 API 调用来获取列名，该怎么办？

@SunilChaudhary 我已经编辑了答案并添加了一个链接到用于此实现的 PHP 中的服务器端示例，希望对您有所帮助！

@AnmolG 你需要为此打开一个新问题，在这里回答这个问题会使这个问题过于宽泛，对不起，伙计。