Styling Angular-Datatable with Bootstrap

Question

I'm trying to make Angular-Datatable (https://l-lin.github.io/angular-datatables/) style like Bootstrap. So, i have the following in my angular.json file:

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

But my datatable look like this:

My project can be found in GitHub: https://github.com/rlanhellas/together-admin

where is the datatable in your project (stackblitz.com/edit/github-xqzvb8) ? — Akber Iqbal
– Akber Iqbal, Commented Apr 29, 2019 at 4:58
@AkberIqbal, Inside "/src/app/usuario/usuario.component.html" — Ronaldo Lanhellas
– Ronaldo Lanhellas, Commented Apr 29, 2019 at 13:49

Ben · Accepted Answer · 2019-11-24 17:52:54Z

1

I had to add these to the bottom of the index.html to get bootstrap styling to work for datatables:

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

answered Nov 24, 2019 at 17:52

Ben

192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rupesh Bharuka · Accepted Answer · 2021-12-24 11:53:25Z

0

I think, you need to add all the below CDNs to resolve your styling issues. This has worked for me too...!!

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

I don't know, why we need to add this CDNs even after installing all the datatable packages and modifying angular.json file.

answered Dec 24, 2021 at 11:53

Rupesh Bharuka

1173 silver badges10 bronze badges

Collectives™ on Stack Overflow

Styling Angular-Datatable with Bootstrap

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related