在Angular中配置Angular-datatables的服务器端Ajax GET请求,您可以按照以下步骤进行操作:
angular-datatables
和datatables.net
。您可以使用npm进行安装:npm install angular-datatables datatables.net --save
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import { DataTablesModule } from 'angular-datatables';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
dtOptions: DataTables.Settings = {};
data: any[] = [];
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.dtOptions = {
ajax: {
url: 'your-api-url',
type: 'GET'
},
columns: [
{ title: 'ID', data: 'id' },
{ title: 'Name', data: 'name' },
{ title: 'Email', data: 'email' }
]
};
}
}
ID
Name
Email
{{ item.id }}
{{ item.name }}
{{ item.email }}
ngOnInit(): void {
this.dtOptions = {
ajax: {
url: 'your-api-url',
type: 'GET'
},
columns: [
{ title: 'ID', data: 'id' },
{ title: 'Name', data: 'name' },
{ title: 'Email', data: 'email' }
],
serverSide: true, // 如果你的数据较多,可以启用服务器端分页
processing: true,
language: {
processing: ' Loading...'
},
rowCallback: (row: Node, data: any[] | Object, index: number) => {
// 在每一行的渲染完成后,可以执行一些自定义操作
}
};
}
请根据您的实际情况修改以上代码中的URL和数据字段。这样配置后,Angular-datatables会向指定的URL发送GET请求,获取数据并在datatable中显示。