Which css and js files do I need?

Which css and js files do I need?

Chris230291Chris230291 Posts: 34Questions: 10Answers: 1
edited October 2021 in General

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited October 2021 Answer ✓

    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

  • Chris230291Chris230291 Posts: 34Questions: 10Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited October 2021

    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

  • Chris230291Chris230291 Posts: 34Questions: 10Answers: 1
    edited October 2021

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • Chris230291Chris230291 Posts: 34Questions: 10Answers: 1

    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/

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • Chris230291Chris230291 Posts: 34Questions: 10Answers: 1

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

Sign In or Register to comment.