Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Table not rendering using the datatables.bootstrap.css

See original GitHub issue

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"

Issue Analytics

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

Top GitHub Comments

2reactions

vaibhav-jaincommented, Jun 2, 2016

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

1reaction

thanuja143commented, Mar 27, 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.

Top Results From Across the Web

Datatables Not Working With Bootstrap 5

Hi today im trying a new project with data tables but data tables button and other thing not applied , any help ?...

DataTable not rendering properly on small device

Now what happens on big devices it is working fine, but when I use that on small device the tbody part properly scrolls...

Mdb datatable does not rendering data which comes from api i

I'm trying to implement a datatable with mdbootstrap in vue.js. I would like to update table data on events and when initialized but...

Why my design of datatable data is not properly working in ...

User-199788946 posted. I have following code see my output image my design is scattered everywhere what is the reason behind this.

Table | Components - BootstrapVue

For displaying tabular data, <b-table> supports pagination, filtering, ... display of tabular data without all the fancy features, BootstrapVue provides two ...