Bootstrap with DataTables

DanJ210

So the datatables that I have aren't resizing like normal columns in boostrap rows. Is this normal or would I need to include more to get datatables working with bootstrap? I've got everything included and bootstrap rows and columns works but when I add datatables, those always stay the same size.

I've read a lot of documentation on datatables and it is quite extensive which is great, have I not come by the bootstrap part yet?

DanJ210

Ok so I think that I didn't realize that bootstrap is another js file that I must include. I downloaded the bundle for datatables and thought that the one file included everything needed. I'm pretty sure that's wrong.

kthorngren

This doc explains what is need when using Bootstrap:
https://datatables.net/manual/styling/bootstrap

The easiest way to get the proper files is by using the Download Builder.

Kevin

DanJ210

Ok I'll make sure I'm doing it correctly. I'm including only the datatables.bootstrap4.css but both the core datatables.js and the datatables.bootstrap4.js as shown in the image but tables aren't rendering correctly so I think I still need core css as well. Still even without the core css, there's enough there to prove that datatables.bootstrap4.css is being used but resizing isn't working.

I've followed that page but I'll investigate deeper. I do feel like this should be working. I've even included class="table" within the table tags for the datatables.

https://1drv.ms/i/s!AlnGeQSYLUVap-kPSEeCoX22GueD3A

This second image is showing the tables being rendered by only the datatables.bootstrap4.css as some certain things are missing, but that I've resized the page and it's staying the same size.

https://1drv.ms/i/s!AlnGeQSYLUVap-kS8omJc-OLKU_A2g

If what I'm missing is in the doc you showed me then ignore this as I'll find it but if this should be working then let me know.

Thanks,
Daniel

DanJ210

I think I see some newbie mistakes. Thank you, Kevin.

kthorngren

It looks like you are loading both the Bootstrap 3 and Bootstrap 4 JS and CSS files.

You probably only want to load either the datatables.bootstrap.min. (BS v3) or datatables.bootstrap4.min. (BS v4) to avoid any conflicts.

Not sure which version you want to use but see if the BS example for the version you want works for you:
https://datatables.net/examples/styling/index.html

If so then you may need to add width="100%" to your table in HTML. See the HTML tab of the example.

The paging buttons don't look right which leads me to believe you are not loading everything correctly:

I don't think you want datatables.min.css as described in the styling link I provided.

Kevin