在 Angular 6 中使用功能齐全的 Datatables 插件

Posted 2023-05-07

【中文标题】在 Angular 6 中使用功能齐全的 Datatables 插件

【英文标题】：Using full featured Datatables Plugin with Angular 6

【发布时间】：2018-12-24 02:40:42

【问题描述】：

我正在尝试在我的 angualar 6 项目中添加 Datatables 插件 (datatables.net) 工具。 我不确定如何使用 npm 安装程序将必要的 css、js 和其他必需文件包含到我的项目中。 选择我的必要选项后，我将遵循 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 中，样式是组件式的，我很容易使用这些样式。 那么，如何将数据表功能用作组件？ 换句话说，我应该在哪里包含 css 和所需的 js 文件来实现页面上的数据表功能？

如果有人做过，请告诉我，或者任何建议将不胜感激。

谢谢。

【参考方案1】：

在 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
  ],

我的数据表库.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>

【讨论】：

在回答之前阅读完整的问题和所有的 cmets，以清楚地了解问题所在。我不想使用 angular-datatables，因为它不包含来自 datatables.net 的全功能数据表，对吗？

嘿，执行此操作时出现此错误 ERROR TypeError: $(...).DataTable is not a function

【参考方案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
                ]

您可能需要停下来重新发球才能看到变化。

【讨论】：

它是 angular-cli.json

我没有检查 v6.好的

@dickrichie 好的，您正在使用 angular-datatable 库，我说的是直接从数据表文件中使用。 angular-datatables 具有要使用的预制组件，因此在这种情况下，您可以像显示的那样使用它。

每当我使用这样的数据表时，我都会收到错误Uncaught ReferenceError: angular is not defined

【参考方案3】：

在 appmodule.ts 的导入中添加 DataTablesModule.forRoot() 有效！或者，如果您使用延迟加载，请记住将其放入每个 module.ts

【参考方案4】：

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>

【讨论】：

请解释一下！

【参考方案5】：

从 API url 获取 JSON 数据

现在你必须在两个组件中播放，只有一个是 html，另一个是 .ts 文件

sample.Component.html

<table  id="_zonetable" class="row-border hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
   <thead>
   ---
   </thead>
    <tbody>
    <tr  *ngFor="let item of ArrayResponse ; let i=index">
      </tr>
    </tbody>
 </table>

现在来到 .ts 文件，例如 sample.Component.ts

import  Component, OnInit ,OnDestroy from '@angular/core';
import  Subject  from 'rxjs';
import  DataTableDirective  from 'angular-datatables';
declare var $: any;

现在在出口中：

export class UtilityComponent implements OnDestroy, OnInit 
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = ;
dtTrigger: Subject<any> = new Subject();



 ngOnInit(): void 
   this.dtOptions = 
      pagingType: 'full_numbers',
      pageLength: 10
    ;


ngOnDestroy(): void 
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();

   if ($.fn.DataTable.isDataTable( '#_zonetable' )) 
    //   // call the loader
      $('#_zonetable').dataTable().api().destroy();
    
  

  rerender(): void 
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => 
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      // this.dtTrigger.next();
    );
  

ServiceFunction() 
    this.ArrayResponse=[];
    if ($.fn.DataTable.isDataTable( '#_zonetable' )) 
      //   // call the loader
        $('#_zonetable').dataTable().api().destroy();
      


this.availservice.JsonAPi()
  .subscribe((json) => 

    this.ArrayResponse = json; //here you will get JSON response
     // Calling the DT trigger to manually render the table
    // debugger;

    if ($.fn.DataTable.isDataTable( '#_zonetable')) 
    //   // call the loader
      $('#_zonetable').dataTable().api().destroy();
        
        this.dtTrigger.next();
        console.log(this.ArrayResponse);
        setTimeout(() => 
          $('.overlaysv').hide();              
        , 2000);

      );
  

【参考方案6】：

只看@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 文件。现在，您添加“数据表”的任何表格标签都应该可以工作了。

-- 编辑

该答案的第一部分是使用 angular-datatables，但正如@fahimuddin 实际上询问如何在没有该软件包的情况下做到这一点，我尝试了不同的方法。

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

declare var $: any;

然后在ngOnInit()中直接使用jQuery和Datatables：

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

它有效，没有人抱怨，但我不确定这是否是一个好习惯？ （就我而言，我正在尝试做一个 Angular-Electron 应用程序，它仍然不能在 Electron 中工作，它也不能与 angular-datatable 一起工作，但这是另一个问题！）

【讨论】：

我认为您还没有阅读我对@dickrichie 回答的评论。 angular-datatables 有一些限制，因此我尝试使用 datatables.net 中的数据表完整功能直接导入所需的文件。

哦，是的，你是对的，我没有检查所有的 cmets。抱歉，看来您仍然没有找到解决方案。我会继续挖掘，如果有什么发现会回来找你的！

@fahimuddin：我刚刚编辑了我的答案，请告诉我这是否是您想要实现的目标？

是的，这就是我想要实现的目标，但我已经关注了你，但它不起作用，它给出了这个问题 > jquery__WEBPACK_IMPORTED_MODULE_3__(...).DataTable is not a function

在此声明中：- $('#table_id').DataTable(); ---- 错误显示：- .DataTable() does not exist in jQuery<HTMLElement>

【参考方案7】：

您需要对angular.json 文件进行更改：

"styles": [
    ...
    "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
    ...
],
"scripts": [
    ...
    "node_modules/datatables.net/js/jquery.dataTables.js",
    "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"
    ...
]

对于扩展插件也是如此。

【参考方案8】：

只需将 .css 文件添加到样式部分，将 .js 文件添加到脚本部分，在 angular(-cli).json 中。我认为这会解决您的问题。

【讨论】：

为了您的信息，我有 angular.json，我没有 angular-cli.json，因为我使用的本地角度解析与我的全局角度 cli 版本不同。我已经尝试添加它，但它不起作用。

@FahimUddin angular-cli.json 和 angular.json 基本相同。根据角度版本，您将看到相应的名称。