Angular4 CLI项目中的Bootstrap 4 Datatablejs

Question

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

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

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

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

感谢。

Answer 1

要使用带有DataTablejs的Bootstrap 4，请使用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>

Answer 2

您需要数据表bootstrap4 css。

https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap4.min.css