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

查看:106
本文介绍了如何使用Angular方式示例在Angular DataTables中使用服务器端选项?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将 Angular DataTables 与<一个href ="https://datatables.net/examples/data_sources/server_side.html" rel ="nofollow noreferrer">服务器端处理选项,但是当我尝试在其"角度方式示例,只有第一个请求被呈现,随后的请求被呈现请求(分页,排序,搜索)已发送,但它们从未更新表.

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;
}


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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆