Can't use DataTables with boostrap 4

applik

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 !

allan

Hi,

I think you might be running into the problem that this commit fixes. As a workaround, if you add cellspacing="0" to your table or add that CSS into your css locally and that should do it.

Allan

applik

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 ?

• the files in the root of the folder ? (datatables.css+datatables.js)
• or the files in the 1.10.16 folder ?

Arnaud

allan

Actually no - the border-collpase style must be separate for DataTables (this is important for tables which have scrollX or scrollY enabled.

You need to use border-spacing as in the commit linked above. You can put it anywhere in the CSS that is included on your page (datatables.css from the files you describe).

Allan

applik

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

allan

Just datatables.min.js and datatables.min.css should do it. The download builder shows the HTML to use at the bottom of the page.

Allan

applik

Thank you Allan.
Now it works perfectly.