使用Angular 6的全功能Datatables插件
发布时间:2020-12-17 17:52:26 所属栏目:安全 来源:网络整理
导读:我正在尝试使用我的angualar 6项目添加Datatables插件(datatables.net)工具. 我不知道如何使用npm安装程序将必要的css,js和其他必需文件包含到我的项目中. 选择我必要的选项后,我遵循NPM Install方法: npm install --save datatables.net-bs4npm install --
我正在尝试使用我的angualar 6项目添加Datatables插件(datatables.net)工具.
我不知道如何使用npm安装程序将必要的css,js和其他必需文件包含到我的项目中. 选择我必要的选项后,我遵循NPM Install方法: 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 安装后,我不确定如何在我的项目中使用这些.我的项目使用ngx-bootstrap(https://www.npmjs.com/package/ngx-bootstrap)进行样式设计. style.scss // where I am only importing my css theme from node_modules 在ngx-bootstrap中,样式是组件明智的,我很容易使用它们. 如果有人这样做,请告诉我,否则任何建议将不胜感激. 谢谢. 解决方法
在Angular 6
angular-datatables中使用角度数据表
在使用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 在app.module.ts中导入DataTablesModule import { DataTablesModule } from 'angular-datatables'; imports: [ DataTablesModule ], 我的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(); } } 我的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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |