Angular 数据表 bootstrap

Question

我正在尝试在 Angular 应用程序中使用 bootstrap 实现 dataTable.net，但样式有点像下图所示。我正在使用我从以下位置获得代码的预制代码：https://datatables.net/examples/styling/bootstrap4 但即便如此，外观还是不同的。

在 angular.json 我有这个：

        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js",
          "node_modules/datatables.net-dt/js/dataTables.dataTables.js"
        ]

并且还尝试应用 css 来更改按钮的颜色。

Picture problem link

Answer 1

通过在 angular.json 文件

中执行此操作解决了该问题

之前：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "src/assets/icons/fontawesome/css/all.css",
          "node_modules/datatables.net-dt/css/jquery.dataTables.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js",
          "node_modules/datatables.net-dt/js/dataTables.dataTables.js"
        ]

之后：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "src/assets/icons/fontawesome/css/all.css",
          "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"
        ]

Answer 2

下载 Javascript

的 CDN

和CSS库文件

从该站点 DataTables Bootstrap 4 并将它们添加到您的项目中。这对我有用！！

Angular 数据表 bootstrap

Angular DataTable bootstrap

css

datatables

typescript

angular-datatables

angular