在 Angular 6 中使用全功能数据表插件 [英] Using full featured Datatables Plugin with Angular 6
问题描述
我正在尝试在我的 angualar 6 项目中添加 Datatables 插件 (datatables.net).我不确定如何使用 npm 安装程序将必要的 css、js 和其他必需文件包含到我的项目中.选择必要的选项后,我将使用以下 NPM 安装方法:
npm install --save datatables.net-bs4npm install --save datatables.net-buttons-bs4npm install --save datatables.net-colreorder-bs4npm install --save datatables.net-responsive-bs4npm install --save datatables.net-rowgroup-bs4npm install --save datatables.net-scroller-bs4
安装后,我不确定如何在我的项目中使用这些.我的项目正在使用 ngx-bootstrap (
在 app.module.ts 中导入 DataTablesModule
import { DataTablesModule } from 'angular-datatables';进口:[数据表模块],
我的 datatableslibrary.ts
import { Component, OnDestroy, OnInit } from '@angular/core';从@angular/http"导入 { Http, Response };从'rxjs'导入{主题};从'@angular/common/http' 导入 { HttpClient };从'../data.service'导入{数据服务};@零件({选择器:'app-datatableslibrary',templateUrl: './datatableslibrary.component.html',styleUrls: ['./datatableslibrary.component.css']})导出类 DatatableslibraryComponent 实现 OnInit、OnDestroy {用户$: any[] = [];dtOptions: DataTables.Settings = {};dtTrigger:主题<任何>= 新主题();构造函数(私有http:HttpClient,私有数据:DataService){}ngOnInit() {this.dtOptions = {pagingType: 'full_numbers',页长:5,处理:真实};this.data.getUsers().subscribe(data => {this.users$ = 数据;this.dtTrigger.next();});}ngOnDestroy(): 无效 {this.dtTrigger.unsubscribe();}}
我的 datatableslibrary.component.html
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"[dtTrigger]="dtTrigger"><头><tr><th>姓名</th><th>电子邮件</th><th>网站</th></tr></thead><tr *ngFor="让用户的用户$"><td>{{用户名}}</td><td>{{ user.email }}</td><td>{{ user.website }}</td></tr></tbody>I am trying to add Datatables plugin (datatables.net) facility with my angualar 6 project.
I am not sure how should I include the necessary css, js and other required files to my project with npm installer.
After selecting my necessary options I am following the NPM Install method with these :
npm install --save datatables.net-bs4
npm install --save datatables.net-buttons-bs4
npm install --save datatables.net-colreorder-bs4
npm install --save datatables.net-responsive-bs4
npm install --save datatables.net-rowgroup-bs4
npm install --save datatables.net-scroller-bs4
After Installing, I am not sure how will I use these in my project. my project is using ngx-bootstrap (https://www.npmjs.com/package/ngx-bootstrap) for styling.
style.scss // where I am only importing my css theme from node_modules
In ngx-bootstrap the styles are component wise, and I am using those easily.
So, how can I use datatables features as a component ?
In another way, where should I include the css, and required js files to achieve the datatables facilities on a page?
If anyone has done it please let me know, or any suggestions will be appreciated.
Thanks.
解决方案 use angular data tables in Angular 6 angular-datatables
You need to install its dependencies before getting the latest release using NPM:
npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables@6.0.0 --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
angular.json
Import the DataTablesModule in app.module.ts
import { DataTablesModule } from 'angular-datatables';
imports: [
DataTablesModule
],
my datatableslibrary.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DataService } from '../data.service';
@Component({
selector: 'app-datatableslibrary',
templateUrl: './datatableslibrary.component.html',
styleUrls: ['./datatableslibrary.component.css']
})
export class DatatableslibraryComponent implements OnInit, OnDestroy {
users$: any[] = [];
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
constructor(private http: HttpClient, private data: DataService) {
}
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 5,
processing: true
};
this.data.getUsers().subscribe(data => {
this.users$ = data;
this.dtTrigger.next();
});
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}
my datatableslibrary.component.html
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users$">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.website }}</td>
</tr>
</tbody>
</table>
这篇关于在 Angular 6 中使用全功能数据表插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆