Which css and js files do I need?

Chris230291

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

kthorngren

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

Chris230291

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.

kthorngren

Guessing you are using the dom option? If so look at the examples for Bootstrap. Or maybe you want do do something like this BS5 buttons example.

Kevin

Chris230291

Yes I am using the dom option. It was Bftp. I just tried <Blf<t>p> but I still get the same result.

allan

Since you are using Bootstrap 5 the dom option 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 the dom option for the default for Bootstrap 5.

Allan

Chris230291

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/

kthorngren

Look at the examples in the dom docs for the BS 5 example:

"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

See the updated example:
http://live.datatables.net/yoroqoya/1/edit

Make adjustments to the grid in the dom option to meet your needs.

Kevin

Chris230291

That is really good thanks. I have been playing around with it and now I have it exactly how I want it.