JQuery DataTable响应行为不适用于Bootstrap 4手风琴内的表答案

【问题标题】：JQuery DataTable responsive behavior not working for table inside Bootstrap 4 accordionJQuery DataTable响应行为不适用于Bootstrap 4手风琴内的表
【发布时间】：2020-11-21 17:53:41
【问题描述】：

我有一个 Bootstrap 4 手风琴，每个部分都有一张桌子。这些表具有 JQuery DataTables 扩展，并设置为响应式。在我将表格放入手风琴之前，表格的行为是响应式的（即图标似乎展开/折叠行，表格大小随着窗口大小调整）。但是在将它们移动到手风琴内之后，表格溢出并从屏幕上消失而不是响应。到目前为止，我已经尝试了所有找到的解决方案，但似乎没有任何效果。任何帮助将不胜感激。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css" type="text/css" rel="stylesheet" />

    <style>
        body {
            padding-top: 0px;
            padding-bottom: 20px;
        }

        /*For centered headings*/
        .heading-center {
            margin-top: 3vh;
            text-align: center;
            font-weight: bold;
        }

        /*Change color of focused elements' border*/
        .form-control:focus {
            border-color: #ffcc24 !important;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 204, 36, 0.8) !important;
            outline: 0 none !important;
        }

        .form-control {
            border: none !important;
        }

        /*Override extra link decorations on navbar and home quick actions*/
        nav > ul > li > a:hover {
            text-decoration-line: none;
        }

        nav > ul > li > ul > li > a:hover {
            text-decoration-line: none;
        }

        .quick-actions a:hover {
            text-decoration-line: none;
        }

        /*Change background color of hovered table row*/
        .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
            background-color: #ffcc24;
            cursor: pointer;
        }

        .table-text-center > tbody > tr > td,
        .table-text-center > thead > tr > th {
            text-align: center;
        }

        /*Override boostrap class attributes.*/
        .table .table-title th{
            background-color: black;
        }

        .table .table-title h1 {
            color: white;
        }

        .table .table-col-titles th{
            background-color: black;
            color: white;
        }

        /*.table {
            border-collapse: separate;
        }*/

        /*Sticky table header*/
        .sticky-title th{
            position: -webkit-sticky;
            position: sticky;
            top: 60px;
        }

        .sticky-col-titles th {
            position: -webkit-sticky;
            position: sticky;
            top: 150px;
        }

        /* Set padding to keep content from hitting the edges */
        .body-content {
            padding-left: 15px;
            padding-right: 15px;
        }

        /* Set width on the form input elements since they're 100% wide by default */
        input,
        select,
        textarea {
            max-width: 280px;
        }

        /*Padding the nav bar*/
        .padded-nav {
            padding: 10px;
        }

        main {
        margin-top: 40px;
        width: 100%;
    }

    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid black;
        margin: 1em 0;
        padding: 0;
    }

    .table {
        width: 100% !important;
    }

    thead {
        color: white;
        background-color: black;
    }

    .descr-table {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        min-width: 250px;
    }

        .descr-table th {
            width: 30%;
            background-color: #ffcc24;
            border: 1px solid black;
        }

        .descr-table td {
            width: 70%;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <main class="container-fluid">
        <h1 class="text-center">CUSTOMER DETAILS</h1>
    
        <table class="descr-table">
            <tr>
                <th>Customer ID</th>
                <td>98789098</td>
            </tr>
            <tr>
                <th>Customer Name</th>
                <td>Business, LLC</td>
            </tr>
        </table>
    
        <hr />
    
        <div class="accordion" id="customerDetailsAccordion">
    
            <div id="poTableHeader" class="collapsed" type="button" data-toggle="collapse" data-target="#poTableWrapper" aria-expanded="false" aria-controls="poTableWrapper">
                <h2 class="text-center">PURCHASE ORDERS</h2>
            </div>
    
            <div id="poTableWrapper" class="collapse container-fluid" aria-labelledby="poTableHeader" data-parent="#customerDetailsAccordion">
                <table id="poTable" class="table table-hover table-striped table-text-center">
                    <thead></thead>
                    <tbody>
                        <tr>
                            <td>234211</td>
                            <td>Products/Services P.O.</td>
                            <td>USD</td>
                            <td>11/20/2020</td>
                            <td>12/20/2021</td>
                            <td>$1000.00</td>
                            <td>$200.00</td>
                            <td>$100.00</td>
                        </tr>
                        <tr>
                            <td>234211</td>
                            <td>Products/Services P.O.</td>
                            <td>USD</td>
                            <td>11/20/2020</td>
                            <td>12/20/2021</td>
                            <td>$1000.00</td>
                            <td>$200.00</td>
                            <td>$100.00</td>
                        </tr>
                        <tr>
                            <td>234211</td>
                            <td>Products/Services P.O.</td>
                            <td>USD</td>
                            <td>11/20/2020</td>
                            <td>12/20/2021</td>
                            <td>$1000.00</td>
                            <td>$200.00</td>
                            <td>$100.00</td>
                        </tr>
                    </tbody>
                </table>
            </div>
    
            <hr />
    
            <div id="userTableHeader" class="collapsed" type="button" data-toggle="collapse" data-target="#userTableWrapper" aria-expanded="false" aria-controls="userTableWrapper">
                <h2 class="text-center">USERS</h2>
            </div>
    
            <div id="userTableWrapper" class="collapse" aria-labelledby="userTableHeader" data-parent="#customerDetailsAccordion">
                <table id="usersTable" class="table table-hover table-striped table-text-center">
                    <thead></thead>
                    <tbody>
                        <tr>
                            <td>Mike Smith</td>
                            <td>smithm01</td>
                            <td>smithm01@tqs.com</td>
                        </tr>
                        <tr>
                            <td>Mike Smith</td>
                            <td>smithm01</td>
                            <td>smithm01@tqs.com</td>
                        </tr>
                        <tr>
                            <td>Mike Smith</td>
                            <td>smithm01</td>
                            <td>smithm01@tqs.com</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <hr />
        </div>
    </main>

    <script  src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script  src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script defer src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script defer src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>

    <script defer>
        $("document").ready(function () {
            $("#poTable").DataTable({
                select: false,
                responsive: true,
                columns: [
                    {
                        title: "PO #"
                    },
                    {
                        title: "Service Type"
                    },
                    {
                        title: "Currency"
                    },
                    {
                        title: "Issue Date"
                    },
                    {
                        title: "Expiration Date"
                    },
                    {
                        title: "Total Amount"
                    },
                    {
                        title: "Threshold Amount"
                    },
                    {
                        title: "Remaining Amount"
                    }
                ]
            });
            
            $("#usersTable").DataTable({
                select: false,
                responsive: true,
                columns: [
                    {
                        title: "Name"
                    },
                    {
                        title: "Username"
                    },
                    {
                        title: "Email"
                    }
                ]
            });
    
            //Redirect to po details page except when expand/collapse icon clicked.
            $('#poTable td').click(function () {
                if ($(this).attr('class') !== 'sorting_1')
                {
                    location.href = '#';
                }
            });
        });
    </script>
    
</body>
</html>

【问题讨论】：

标签： html jquery datatables responsive

【解决方案1】：

哦，那很有趣！在一个无聊的星期天下午做这件事！

无论如何，当它不可见时，您无法做出响应。 DataTables 总是存在不可见表的问题 - 让我陷入困境的是弄清楚如何收听显示的事件 - 我尝试了原生 Bootstrap 机制，但没有任何乐趣（不过我会尝试更多）。与此同时，这种方法 - 使用几个 MutationObservers - 似乎很有效：

  const poNode = document.getElementById('poTableWrapper');
  const usersNode = document.getElementById('usersTable');
  const config = {
    attributes: true
  };
  const poCallback = function (mutationsList, observer) {
    for (const mutation of mutationsList) {
      if (mutation.type === 'attributes') {
        $("#poTable").DataTable().columns.adjust().responsive.recalc();
      }
    }
  };
  const usersCallback = function (mutationsList, observer) {
    for (const mutation of mutationsList) {
      if (mutation.type === 'attributes') {
        $("#usersTable").DataTable().columns.adjust().responsive.recalc();
      }
    }
  };
  const poObserver = new MutationObserver(poCallback);
  const usersObserver = new MutationObserver(usersCallback);
  poObserver.observe(poNode, config);
  usersObserver.observe(usersNode, config);

在这里工作的repl：https://repl.it/@annoyingmouse/DearestCelebratedMultithreading#script.js（如果有用，现在复制代码，我不确定它会在那里持续多久）

【讨论】：

效果更好，但由于某种原因，它两次将 DataTable 添加到表中，因此出现了两组“显示 # 条目”和搜索栏。这也导致行展开/折叠不展开/折叠正确的行。
没关系，一定是复制错误。感谢您的解决方案！
乐于助人！任何事情都可以休息一下；-) 如果您认为某个答案解决了问题，请单击绿色复选标记将其标记为“已接受”。这有助于将注意力集中在仍然没有答案的旧 SO。