Angular4 CLI 项目中的 Bootstrap 4 Datatablejs

Posted 2023-05-07

【中文标题】Angular4 CLI 项目中的 Bootstrap 4 Datatablejs

【英文标题】：Bootstrap 4 Datatablejs in Angular4 CLI project

【发布时间】：2017-11-20 05:45:32

【问题描述】：

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

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

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

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

谢谢。

【参考方案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" >
      </table>

【参考方案2】：

您需要数据表 bootstrap4 css。

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

【讨论】：

我把它放在我的 index.html 中，但还是不行。 cdn.datatables.net/1.10.15/css/…>

从 angular-cli.json 中删除 dataTables.bootstrap.css 并重新编译资源，您可能在页面上与两者有冲突

另外，这是数据表在其示例中使用的 bootstrap4 css 的链接。 //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css

好的..我的索引中有这两个参考 cdn.datatables.net/1.10.15/css/…> cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alp‌​ha。 6/css/bootstrap.c‌​ss"/> 但不起作用。:(我还从配置文件中删除了dataTables.bootstrap.css。