使用 Bootstrap 设置 Angular-Datatable 样式答案

【问题标题】：Styling Angular-Datatable with Bootstrap使用 Bootstrap 设置 Angular-Datatable 样式
【发布时间】：2019-04-26 19:58:56
【问题描述】：

我正在尝试制作像 Bootstrap 这样的 Angular-Datatable (https://l-lin.github.io/angular-datatables/) 样式。所以，我的 angular.json 文件中有以下内容：

 "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/datatables.net-bs/css/dataTables.bootstrap.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.slim.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/datatables.net/js/jquery.dataTables.js",
              "node_modules/datatables.net-bs/js/dataTables.bootstrap.js"
            ]

但是我的数据表是这样的：

我的项目可以在 GitHub 上找到：https://github.com/rlanhellas/together-admin

【问题讨论】：

如果您分享 Stackblitz，帮助会更容易
我在 GitHub 中使用代码编辑了我的帖子
项目中的数据表在哪里 (stackblitz.com/edit/github-xqzvb8) ？
@AkberIqbal，内部“/src/app/usuario/usuario.component.html”

标签： angular angular-datatables

【解决方案1】：

我必须将这些添加到 index.html 的底部，以使引导样式适用于数据表：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" 
type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" 
type="text/javascript"></script> 
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" 
type="text/javascript"></script>

【讨论】：

【解决方案2】：

我认为，您需要添加以下所有 CDN 来解决您的样式问题。这对我也有用...！！

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>

我不知道，为什么在安装了所有的数据表包并修改了 angular.json 文件之后，我们还需要添加这个 CDN。

【讨论】：