在Angular 6中使用全功能的Datatables插件
我正在尝试在我的angualar6项目中添加Datatables插件(datatables.net)工具。我不确定我应该如何包含必要的css，js和其他必要的文件，我的项目与npm安装程序。在选择了必要的选项后，我将按照NPM的安装方法执行以下操作：
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中，样式是组件智能的，我可以很容易地使用它们。那么，我如何使用datatables特性作为组件呢？换一种方式，我应该在哪里包含css，以及在页面上实现数据表功能所需的js文件？
如果有人这样做了，请让我知道，或任何建议将不胜感激。
谢谢。
回答 8
Stack Overflow用户
发布于 2018-09-09 18:43:50
在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-devangular.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();
}
}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>
Stack Overflow用户
发布于 2018-07-17 00:52:27
我通过执行以下操作让DataTables正常工作：
angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]app.module.ts
import {DataTablesModule} from 'angular-datatables';
imports: [
...
DataTablesModule
]您可能需要停下来重新服务才能看到更改。
Stack Overflow用户
发布于 2019-02-20 03:53:08
在appmodule.ts works的导入中添加DataTablesModule.forRoot()！或者，如果您正在使用延迟加载，请记住将其放入每个module.ts中
https://stackoverflow.com/questions/51363693
复制相似问题
腾讯云开发者
