响应式 JS DataTable 中的 Bootstrap 5 弹出框无法正常工作

问题描述 投票：0回答：1

我正在使用 Bootstrap 5.3.3 和 JS DataTables 2.0.5 构建一个爱好网页。在页面上，我有一个包含一些玩家数据的表格。在表中，我做到了，因此当单击某些单元格时，会显示带有额外信息的弹出窗口。所有必需的模块都在那里，并且当表格以全宽显示时，弹出窗口工作正常。但是，如果我调整屏幕大小以使某些列折叠，则这些列的弹出窗口不会显示。

在 JS Fiddle 中重现示例：

<head>
  <meta charset="utf-8">
  <title>Responsive Table Popover</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link href="https://cdn.datatables.net/2.0.5/css/dataTables.bootstrap5.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.bootstrap5.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <table id="players-data" class="table table-striped" style="font-size:13px; width: 100%;">
        <thead style="white-space: nowrap;">
            <tr>
                <th>Player</th>
                <th>Details 1</th>
                <th>Details 2</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"> </script>
    <script charset="utf8" src="https://cdn.datatables.net/2.0.5/js/dataTables.min.js"></script>
    <script charset="utf8" src="https://cdn.datatables.net/2.0.5/js/dataTables.bootstrap5.min.js"></script>
    <script charset="utf8" src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.min.js"></script>
    <script charset="utf8" src="https://cdn.datatables.net/responsive/3.0.2/js/responsive.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script type="text/javascript">
      let players = [
        {player: 'Best', details_1: 'Cool', details_2: 'Sharp', details_1_extra: 'Extra Cool', details_2_extra: 'Extra Sharp'},
        {player: 'Worst', details_1: 'Hot', details_2: 'Slow', details_1_extra: 'Extra Hot', details_2_extra: 'Extra Slow'}
      ];

      $('#players-data').DataTable({
        data: players,
        columns: [
            {data: 'player', render: DataTable.render.text(), sortable: true},
            {data: 'details_1', sortable: false, class: "text-center", render: function (data, type, row) {
                if (data)
                {
                    return `<a 
                        tabindex="0" 
                        type="button" 
                        class="btn btn-link btn-sm" 
                        data-bs-container="body" 
                        data-bs-trigger="focus" 
                        data-bs-toggle="popover" 
                        data-bs-placement="bottom" 
                        data-bs-html="true" 
                        data-bs-custom-class="custom-popover"
                        data-bs-content="${row.details_1_extra}">
                        ${data}
                    </a>`;
                } else {
                    return data;
                }
            }},
            {data: 'details_2', sortable: false, class: "text-center", render: function (data, type, row) {
                if (data)
                {
                    return `<a 
                        tabindex="0" 
                        type="button" 
                        class="btn btn-link btn-sm" 
                        data-bs-container="body" 
                        data-bs-trigger="focus" 
                        data-bs-toggle="popover" 
                        data-bs-placement="bottom" 
                        data-bs-html="true" 
                        data-bs-custom-class="custom-popover" 
                        data-bs-content="${row.details_2_extra}">
                        ${data}
                    </a>`;
                } else {
                    return data;
                }
            }}
        ],
        destroy: true,
        searching: false, 
        paging: true, 
        info: false,
        ordering: true,
        stateSave: true,
        responsive: true,
        drawCallback: function (settings) {
            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
            const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
        }
    });
    </script>
</body>

当表格为全宽时（显示所有列），两列上的弹出窗口都工作正常： enter image description here

当“详细信息 2”列因屏幕尺寸而折叠时，无论您单击单元格文本，它都不再显示弹出窗口：

enter image description here

我的代码中缺少什么才能让弹出窗口正常工作？

javascript html datatables bootstrap-5
1个回答
0
投票

您应该使 table 元素成为具有“table-responsive”类的 div 元素的子元素，例如：

<div class="table-responsive">
       <table id="players-data" class="table table-striped" style="font-size:13px; width: 100%;">
            <thead style="white-space: nowrap;">
                <tr>
                    <th>Player</th>
                    <th>Details 1</th>
                    <th>Details 2</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.