angular-datatables: Table not rendering using the datatables.bootstrap.css

Hi, I’m able to create a table with angular-datatables but it’s not formatted correctly it doesn’t seem to be integrating with the datatables.bootstrap.css. I have the following in the <head> of my index.html. The browser is able to load all of the CSS and JS files. I’m using UI Bootstrap.

<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/datatables.bootstrap.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/assets/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/js/vendor/jquery.dataTables.js"></script>
<script type="text/javascript" src="/assets/js/vendor/angular.js"></script>
<script type="text/javascript" src="/assets/js/vendor/angular-ui-router.js"></script>
<script type="text/javascript" src="/assets/js/vendor/angular-animate.js"></script>
<script type="text/javascript" src="/assets/js/vendor/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="/assets/js/vendor/lodash.js"></script>
<script type="text/javascript" src="/assets/js/vendor/restangular.js"></script>
<script type="text/javascript" src="/assets/js/vendor/angular-datatables.js"></script>
<script type="text/javascript" src="/assets/js/vendor/fastclick.js"></script>
<script type="text/javascript" src="/assets/js/app.js"></script>
<script type="text/javascript" src="/assets/js/controllers/userCtrl.js"></script>
<script type="text/javascript" src="/assets/js/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="/assets/js/controllers/dropDownCtrl.js"></script>

The table I’m trying to render is the Zero Configuration example:

ID	First name	Last name
1	Foo	Bar
123	Someone	Youknow
987	Iamout	Ofinspiration

Versions of the files I have installed (taken from my bower.json):

"angular-animate": "~1.3.9",
"angular-aside": "~1.1.2",
"angular-bootstrap": "~0.12.0",
"angular-datatables": "~0.3.1",
"angular-highcharts": "*",
"angular-ui-router": "~0.2.13",
"fastclick": "~1.0.3",
"bootstrap": "~3.3.1",
"restangular": "~1.4.0",
"ui-bootstrap": "~0.12.0",
"ui-router": "~0.2.13"

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 22 (6 by maintainers)

Most upvoted comments

@MikhaelGerbet 's solution is working .withOption('hasBootstrap', true)

vaibhav-jain on Jun 2, 2016

hi, Binding Angular directive to the DataTable, I’m trying this but could not able to achieve , can you please send the html and js code. and in my application I need to get data from sql sever database and to be displayed in the datatable. could you please help out to achieve this.

thanuja143 on Mar 27, 2016

You forgot the table CSS class in your table:

<table datatable="" dt-options="dtOptions" class="table row-border hover">
...
</table>

For a complete example, see plnkr.

l-lin on Jan 16, 2015