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