Which css and js files do I need?
Which css and js files do I need?
Chris230291
Posts: 34Questions: 10Answers: 1
I have the following enabled.
<!--Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Datatables-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css" rel="stylesheet">
My page is using bootstrap and I would like my table to match. Right now I am manually applying classes to the datatable filter, list etc to make it match. Should I be having to do this? I also think I have something missing because the page number and text have no style. Previous12345…95Next
Can anyone advice?
Thanks,
Chris
This question has accepted answers - jump to:
Answers
You will want to read the Styling docs and look at the Bootstrap 5 example.
Use the Download Builder to get the proper style integration files for the styling framework you are using. Looks like you above code is mostly using the default Datatalbes styling and not the Bootstrap 5 styling files.
Also it looks like you your loading the bootstrap CSS files twice in lines 2 and 16. You probably only want to load one of these to avoid conflicting styles.
Kevin
That's brilliant thanks. I feel stupid for ignoring the downloader. I didn't realize it also had CDN links.
I wonder if you know why these elements appear on different rows and If I can put them on the same line? The button uses the button extension.
Guessing you are using the
domoption? If so look at the examples for Bootstrap. Or maybe you want do do something like this BS5 buttons example.Kevin
Yes I am using the dom option. It was
Bftp. I just tried<Blf<t>p>but I still get the same result.Since you are using Bootstrap 5 the
domoption will need to be a fair bit more complex than that I'm afraid. You want DataTables to use the Bootstrap grid classes. Have a look at thedomoption for the default for Bootstrap 5.Allan
Sorry I don't understand. I don't think I am using the bootstrap grid. I made a example here... http://live.datatables.net/gogowuja/1/
Look at the examples in the
domdocs for the BS 5 example:See the updated example:
http://live.datatables.net/yoroqoya/1/edit
Make adjustments to the grid in the
domoption to meet your needs.Kevin
That is really good thanks. I have been playing around with it and now I have it exactly how I want it.