Angular DataTable bootstrap

Question

我正试图在一个Angular应用中用bootstrap实现一个dataTable.net，但是风格有点像下图中的风格。我使用的是一个预建的，我从那里得到的代码。https:/datatables.netexamplesstylingbootstrap4。 但即使如此，外观还是不同。

在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来改变按钮的颜色。

图片问题链接

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"
        ]