Question

我在Angular 6中使用DataTable在Angular中是新手。

（引文：https://l-lin.github.io/angular-datatables）

我已经安装了固定柱。

npm install datatables.net-fixedcolumns-bs

我初始化表的角度代码是

ngOnInit() {   
    this.dtOptions[0] = {
      pagingType: 'full_numbers',
      pageLength: 25,
      info:"Showing _START_ to _END_ of _TOTAL_ results",
      infoEmpty:"Showing 0 to 0 of 0 results",
      scrollX:true,
      scrollCollapse:true,
      fixedColumns:{
        leftColumns: 1,
        rightColumns: 1
      }
    };

HTML代码是

<table class="table table-hover row-border hover" datatable [dtOptions]="dtOptions[0]" [dtTrigger]="dtTrigger" >
    <thead>
        <tr>
            <th style="text-align: left">Flag/Register name</th>
            <th style="text-align: left">Country/Government</th>
            <th style="text-align: center">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let flagView of flagViewModel">
            <td>{{flagView.countryName}} </td>
            <td>
                <div style="text-transform: uppercase" *ngIf="flagView.flagnameOfficialOther!=null">
                    {{flagView.flagnameOfficialOther}}
                </div>
            </td>
            <td style="text-align: center">
                <a style="border-top:0;border-left:0;border-right:0;" [routerLink]="['/flags/',flagView.flagId]" class="button-action x-small">View</a>
            </td>
        </tr>
    </tbody>
</table>

我没有收到任何错误消息，但是它不起作用。

请告诉我我需要做什么。

谢谢。

Answer 1

您必须安装以下内容：

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

您安装了所有东西吗？ https://l-lin.github.io/angular-datatables/#/getting-started

Answer 2

我可以告诉你我是如何在Angular 8中完成的。

首先，我安装了：

npm i datatables.net
npm i datatables.net-fixedcolumns-bs
npm i datatables.net-fixedcolumns
npm install @types/datatables.net-fixedcolumns

然后，我将这些条目添加到angular.json文件中：

"styles": [
          "src/styles.css",
          "node_modules/datatables.net-dt/css/jquery.dataTables.css",
          "node_modules/bootswatch/dist/minty/bootstrap.min.css",
          "node_modules/datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/datatables.net-dt/js/dataTables.dataTables.js",
          "node_modules/datatables.net-fixedcolumns-dt/js/fixedColumns.dataTables.js"
]

我将其添加到组件文件中（而不是在app.module.ts中）：

import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-fixedcolumns-dt';

要稍后在我的组件中定义一个表，

<table id="products" class="table table-striped table-bordered">

最后加载数据...

$('#products').DataTable({
      "columnDefs": [ 
        { "title": "Name", "targets": 0 },
        { "title": "Price", "targets": 1 },
        { "title": "Stock", "targets": 2 },
        { "title": "Description", "targets": 3 }
      ],
      fixedColumns:{
           leftColumns: 2
      },
      "data": formattedData
});

如何在Datatable Angular 6中使用“ fixedColumns”

2 个答案: