Can't use DataTables with boostrap 4
Can't use DataTables with boostrap 4
applik
Posts: 6Questions: 2Answers: 0
Hi,
I'm sorry but I don't understand how to make DataTable work correctly with Bootstrap 4.
I've used the download builder to get a bootstrap 4 package, without any other option than boostrap 4 checked.
I use bootstrap-4.0.0-beta.3
The package includes 4 standard files at the root of the archive :
- datatables.css (+datatables.min.css)
- datatables.js (+datatables.min.js)
If I use those files, the plugin works, but the border-spacing is separated (I want it collapsed). I did not find a way to make it collapsed (I don't want to add a "style" attribute on my table).
See : https://i.imgur.com/H0EmNSb.png
I thought I was not using the right correct files for bootstrap.
In the archive, there is also a "DataTables-1.10.16" folder which includes some folders (css, js, images) in which I found :
- dataTables.bootstrap4.js
- dataTables.bootstrap4.css
I've tried to use those two files instead of the original files : now my borders are collapsed, but DataTables does not work anymore : I get a "$().DataTable is not a function" error in the javascript console.
Could you tell me what i'm doing wrong ?
Thanks !
This question has an accepted answers - jump to answer
Answers
Hi,
I think you might be running into the problem that this commit fixes. As a workaround, if you add
cellspacing="0"to yourtableor add that CSS into your css locally and that should do it.Allan
Hi Allan,
Thank you,
Indeed, there is a simple workaround with the following css directly in the table tag :
style="border-collapse:collapse !important;"Could you confirm which files I should include in my code ?
Arnaud
Actually no - the
border-collpasestyle must beseparatefor DataTables (this is important for tables which havescrollXorscrollYenabled.You need to use
border-spacingas in the commit linked above. You can put it anywhere in the CSS that is included on your page (datatables.cssfrom the files you describe).Allan
OK thank you.
And finally, about the files to include, I use :
- DataTables/datatables.min.js
- DataTables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css
Just
datatables.min.jsanddatatables.min.cssshould do it. The download builder shows the HTML to use at the bottom of the page.Allan
Thank you Allan.
Now it works perfectly.