twitter-bootstrap - Angular4 CLI 项目中的 Bootstrap 4 Datatablejs

Question

我刚刚使用 Angular CLI 实用程序在 Angular 4 中创建了一个网络应用。

我想在我的网络应用程序的一页中显示一个带有 DatatableJs 的表格。我明白了，但风格太糟糕了。

我认为是依赖安装问题。我安装了 Bootstrap 4 和 DataTables core通过 npm。

这是我在 .angular-cli.json 文件中的配置:

谢谢。

Answer 1

要将 Bootstrap 4 与 DataTablejs 一起使用，请使用 npm 安装 Bootstrap 4 包。

npm install --save datatables.net-bs4

然后，更新“.angular-cli.json”文件的样式和脚本属性，如下所示。

{
 ........
  "apps": [
    { 
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        //for bootstrap4
        "../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js",
        //for bootstrap4
        "../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js"
      ]
      ...
    }
  ],
 .....
}

经过上面的改变，我们可以使用bootstrap4类来显示像bootstrap4表这样的表

<table id='table' datatable [dtOptions]="dtOptions" class="table table-striped table-bordered" cellspacing="0" width="100%">
      </table>