使用Angular 6的全功能Datatables插件

Question

我正在尝试使用我的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中，样式是组件明智的，我很容易使用它们。那么，我如何将数据表功能用作组件？换句话说，我应该在哪里包含css和必需的js文件来实现页面上的数据表设施？

如果有人这样做，请告诉我，否则任何建议将不胜感激。

谢谢。

Answer 1

在Angular 6 angular-datatables中使用角度数据表

在使用NPM获取最新版本之前，您需要安装其依赖项：

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install [email protected] --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>

Answer 2

我通过执行以下操作使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
                ]

您可能必须停下来并重新服务以查看更改。

Answer 3

通过观察@dickrichie的问题和答案，我仍然有一个错误：

ERROR in node_modules/angular-datatables/src/angular-datatables.directive.d.ts(1
,23): error TS2688: Cannot find type definition file for 'datatables.net'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(15,16): er
ror TS2503: Cannot find namespace 'DataTables'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(27,25): er
ror TS2503: Cannot find namespace 'DataTables'.

我错过了最后两个安装步骤，以使Datatables.net与Angular 6一起使用。

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/datatables.net --save-dev

然后按照@dickrichie中的消息编辑angular.json和app.module.ts文件。现在任何添加“datatable”的表标签都应该有效。

- 编辑

答案的第一部分是使用角度数据表，但正如@fahimuddin实际上在没有该包的情况下如何做到这一点，我尝试了不同的方式。

因此无需安装最后两个软件包，angular.json看起来与@dickrichie答案相同，并且在我刚刚在@Component之前添加的组件中：

declare var $: any;

然后在ngOnInit（）中直接使用jQuery和Datatables：

$('#your-datatable-id').DataTable();

它有效，没有人在抱怨，但我不确定这是不是一个好习惯？ （并且在我的情况下，我正在尝试使用Angular-Electron应用程序，它仍然没有在Electron中工作，它也没有使用角度数据表，但这是另一个问题！）

Answer 4

添加DataTablesModule.forRoot()进口appmodule.ts作品！或者，如果你使用延迟加载记得把它放在每个module.ts

Answer 5

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ToastrManager } from 'ng6-toastr-notifications';
import { environment } from 'src/environments/environment';
import { HttpClient, HttpParams } from '@angular/common/http';
import { LoginService } from '../login.service';
declare var $;

class SiteModal {
  OrderNumber: string;
  ContactName: string;
  EntityName: string;
  ContactNo: string;
  CategoryName: string;
  StatusName: string;
}

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}


@Component({
  selector: 'app-site',
  templateUrl: './site.component.html',
  styleUrls: ['./site.component.scss']
})



export class SiteComponent implements OnInit {
  @ViewChild('dataTable') table: ElementRef;
  dataTable: any;
  dtOptions: DataTables.Settings = {};
  siteModal: SiteModal[];
  dataTablesResponse: DataTablesResponse[];
  datatable: any;
  public data: Object;
  public temp_var: Object = false;

  constructor(
    private http: HttpClient,
    public toastr: ToastrManager,
    private LoginService: LoginService
  ) { }



  ngOnInit(): void {
    const that = this;
  
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      ordering: false,
      searching: false,


      ajax: (dataTablesParameters: any, callback) => {
        let params = new HttpParams();
        let startNumber: any;

        startNumber = dataTablesParameters.start;
        if (startNumber != 0) {
          startNumber = startNumber + 1
        } else {
          startNumber = startNumber;
        }
        params = params.append("start", startNumber);
        params = params.append("length", dataTablesParameters.length);
        let param = params.toString();
        setTimeout(() => {
          $(".dataTables_empty").hide();
        }, 500);
        that.http
          .post<DataTablesResponse>(
            environment.apiUrl + "api/Entity/GetSiteList",
            params, {}
          ).subscribe(resp => {
            that.siteModal = resp.data;
            debugger
            setTimeout(() => {
              $(".dataTables_empty").hide();
            }, 500);
            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{ data: 'OrderNumber' }, { data: 'ContactName' }, { data: 'EntityName' }, { data: 'ContactNo' }, { data: 'StatusName' }, { data: 'CategoryName' }]
    };


  }

}

<section class="content-header ng-scope">
        <h1>Site </h1>
    </section>
    
    <section class="content">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12 table-responsive">
                        <table id='Clienttbl' datatable [dtOptions]="dtOptions" class="row-border hover">
                            <thead>
                              <tr>
                                <th>Order #</th>
                                <th>ContactName</th>
                                <th>Entity Name</th>
                                <th>ContactNo</th>
                                <th>StatusName</th>
                                <th>Category Name</th>
                              </tr>
                            </thead>
                            <tbody *ngIf="siteModal?.length != 0">
                                <tr *ngFor="let data of siteModal">
                                    <td>{{ data.OrderNumber }}</td>
                                    <td>{{ data.ContactName }}</td>
                                    <td>{{ data.EntityName }}</td>
                                    <td>{{ data.ContactNo }}</td>
                                    <td>{{ data.StatusName }}</td>
                                    <td>{{ data.CategoryName }}</td>
                                </tr>
                            </tbody>
                          
                          </table> 
    
                    </div>
                </div>
            </div>
        </div>
    </section>
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

Answer 6

只需在样式部分中添加.css文件，在Scripts部分中添加.js文件，在angular（-cli）.json中。我认为这可以解决您的问题。

Answer 7

你可以在这里找到一个完整的答案：https://medium.com/apprendre-le-web-avec-lior/angular-5-and-jquery-datatables-fd1dd2d81d99

按照步骤，你会没事的