DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

DataTables 1.10.25 breaks table-striped

DataTables 1.10.25 breaks table-striped

aklietzaklietz Posts: 8Questions: 0Answers: 0
in Bug reports

DataTables 1.10.25 broke <table class="table-striped"> with Bootstrap 5.

table.dataTable.table-striped tr.odd {
  background-color: #f9f9f9 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: none !important;
}

The !important tags break table-hover and row selection. It also breaks highlighting a row in Editor (the row disappears).

The !important tags only appear in the concatenated datatables.css and the minified datatables.min.css generated by the Download Builder. They do not appear in the original source css folder DataTables-1.10.25/css.

Replies

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    I'm not clear what you mean, Editor appears to be working fine here with that CSS: http://live.datatables.net/pehutujo/1/edit

    Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

    Cheers,

    Colin

  • aklietzaklietz Posts: 8Questions: 0Answers: 0

    I created a test case at http://live.datatables.net/cabonuwe/1/edit

    Click on the odd-numbered rows and they disappear.

    The problem is unique to Bootstrap 5.

    The problem is with RowGroup 1.1.3, specifically rowGroup.bootstrap.css:

    table.dataTable.table-striped tr.dtrg-level-0 td {
  background-color: #e0e0e0 !important;
}
table.dataTable.table-striped tr.dtrg-level-1 td {
  background-color: #f0f0f0 !important;
}
table.dataTable.table-striped tr.odd {
  background-color: #f9f9f9 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: none !important;
}

    By the way, creating the example was not easy. The JSBin library menu does not support BS5 so I had to figure out all the CDN links by trial and error. The console does not report 404s so I had to construct the whole example offline and then paste it back into JSBin to get it to work.

  • aklietzaklietz Posts: 8Questions: 0Answers: 0

    The bad file is rowGroup.bootstrap5.css (corrected).

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Thanks for that test case, I'm seeing it to. The easiest way to create the package is on the download page - there it's just a few clicks to get the required packages - see your example here with the generated package : http://live.datatables.net/tanejuwu/1/edit

    I've raised it internally (DD-1999 for my reference) and we'll report back here when there's an update.

    Cheers,

    Colin

  • allanallan Posts: 63,488Questions: 1Answers: 10,467 Site admin

    Thanks for letting us know about this. I've committed the fix here. The nightly will be up-to-date with the change soon.

    Allan

  • aklietzaklietz Posts: 8Questions: 0Answers: 0

    Thank you!

  • FicosFicos Posts: 88Questions: 22Answers: 0

    I have downloaded the fix from the nightly but it doesn't help. Creating the package from the downloadpage doesn't solve the problem either. I am not using rowGroup and still have the issue

  • FicosFicos Posts: 88Questions: 22Answers: 0

    The same problem occurs with Select2: the selected list appears behind the editormodal and therefore partly invisible

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    @Ficos , could you update the test case in my last message to demonstrate the issue, please, as we're not seeing it here. It'll help to make sure we're both looking at the same thing!

    Colin

  • FicosFicos Posts: 88Questions: 22Answers: 0

    testcase

    <?php

include '../_vti_php/main.php';
//check_loggedin($pdo);

<?php
>
<!DOCTYPE html>

?>


<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Oostveen Advies - Index</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="../_vti_php/images/Oostveen_v2.jpg" rel="icon">
    <link href="../assets/img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- datatables css files -->
    <link rel="stylesheet" type="text/css" href="../library_b5/datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="../css/editor.bootstrap5.min.css">
    

        <!-- Vendor CSS Files -->
    <link href="../assets/vendor/animate.css/animate.min.css" rel="stylesheet">
    <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="../assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="../assets/vendor/remixicon/remixicon.css" rel="stylesheet">
    <link href="../assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">


    <!-- Template Main CSS File -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
    <link href="../assets/css/style.css" rel="stylesheet">

    <!-- datatables js files -->
    <script type="text/javascript" src="../library_b5/datatables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/editor.bootstrap5.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="../extensions/moment/moment-with-locales.js"></script>
    <script src="../extensions/datetime-moment.js"></script>

    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
    <script src="../extensions/editor.ckeditor5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
    <script src="../extensions/editor.select2.js"></script>
    <script>
        let editor;
        /*
        var curDossier = <?php echo $_SESSION['clientID']; ?>;
        var curToegang = <?php echo $_SESSION['toegang']; ?>;
        var curUser = <?php echo $_SESSION['id']; ?>;;
        var naam;
        */
    </script>

</head>

<body class="bootstrap4">
    <?php include "../html/header.html"; ?>
    <main id="main">

        <!-- ======= Breadcrumbs ======= -->
        <section id="breadcrumbs" class="breadcrumbs">
            <div class="container">

                <div class="d-flex justify-content-between align-items-center">
                    <h2>Opdrachten </h2>
                    <ol>
                        <li>
                            <form role="form">
                                <div class="form-group">
                                    <select class="selectpicker form-control form-control-sm form-center" id="empid"
                                        data-container="breadcrumbs" data-live-search="true" data-hide-disabled="true">
                                        <option selected="selected" value="2021">2021</option>
                                        <option value="2020">2020</option>
                                        <option value="2019">2019</option>
                                        <option value="2018">2018</option>
                                        <option value="2017">2017</option>
                                        <option value="2016">2016</option>
                                    </select>
                                </div>
                            </form>
                        </li>
                        <li><a href="../index.php">Home</a></li>
                        <li>Opdrachten</li>
                    </ol>
                </div>

            </div>
        </section><!-- End Breadcrumbs -->

        

        <!-- ======= Contact Section ======= -->
        <section id="contact" class="contact">
            <div class="container">


                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered responsive"
                    id="opdracht_v2" width="100%">
                    <thead>
                        <tr>
                            <th>cliënt</th>
                            <th>naam</th>
                            <th>start</th>
                            <th>planning</th>
                            <th>status</th>
                            <th>gereed</th>
                            <th>omschrijving</th>
                            <th>budget</th>
                            <th>gemaakt</th>
                            <th>gewijzigd</th>
                        </tr>
                    </thead>
                </table>



            </div>
        </section><!-- End Contact Section -->


    </main>
    <?php include "../html/footer.html"; ?>
</body>
<script>
    $.extend(true, $.fn.dataTable.defaults, {
        language: { "url": "../_vti_php/dataTables.dutch.txt" }
    });
</script>
<script type="text/javascript" charset="utf-8" src="js/table.opdracht_v2.js"></script>

</html>

    I sm not even using RowGroup, just a simple table. Problem is table-striped.

  • FicosFicos Posts: 88Questions: 22Answers: 0
    edited July 2021

    I removed line 29, but it doesn't help. Table-striped still causes the problem

  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948

    Your test case is prompting for a login.

    I sm not even using RowGroup, just a simple table. Problem is table-striped.

    Not seeing your Datatables initialization in the above code snippet. Are you saying you don't want the striped table? If so remove table-striped from your table element.

    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered responsive"

    If you still need help please provide the login info and the problem description and how to recreate the problem.

    Kevin

  • FicosFicos Posts: 88Questions: 22Answers: 0

    sorry, this is without login

    I DO want the striped table. The problem is that every striped row disappears when selected.

  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948

    I sm not even using RowGroup, just a simple table. Problem is table-striped.

    You are still loading the rowGroup library (.css and .js). Try adjusting the Datatables includes to just the extensions you are using, ie, remove RowGroup and the others to avoid any conflicts.

    Take a look at this example:
    http://live.datatables.net/zikuceri/1/edit

    Its not using RowGroup and has rowGroup.bootstrap5.min.css commented out. Uncomment it and you will see the same issue.

    Kevin

  • FicosFicos Posts: 88Questions: 22Answers: 0
    edited July 2021

    You are still loading the rowGroup library (.css and .js).

    I am sorry, I can't see where I am loading these.
    in this test i removed all css-links except -<link rel="stylesheet" type="text/css" href="../library_b5/datatables.min.css" />

    The problem still occurs....

    datatables.min.css comes from the downloadpage and I performed download even without RowGroup

    <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
  • FicosFicos Posts: 88Questions: 22Answers: 0

    Changing to

    <link rel="stylesheet" type="text/css" href="../library_b5/Bootstrap-5-5.0.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../library_b5/Select-1.3.3/css/select.bootstrap5.min.css" />

    solved the problem. Instead of 1 css-file (datatables.css) as suggested on the downloadpage I have to put in the individual files....

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.