Angular4 CLI项目中的Bootstrap 4 Datatablejs

Question

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

我想在Web应用程序的一页中显示一个带有DatatableJs的表。 我知道了，但是风格太糟糕了。

我认为这是由于依赖项安装问题引起的。 我通过npm安装了Bootstrap 4和DataTables核心 。

这是我在.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>

Answer 2

您需要datatables bootstrap4 CSS。

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