如何强制响应式数据表显示超过 6 列？

Question

我正在使用一个包含 7 列的响应式数据表。在其模板中查看它（它是更大的表）：http://darasu.xyz/DatatableExample/datatable-ex.html

我正在使用的是来自这里： https://datatables.net/extensions/fixedheader/examples/integration/responsive-bootstrap.html

我希望所有列始终显示在桌面上。它有可行的空间，而且我不喜欢默认显示的可扩展“+”按钮。

它似乎只允许跨越 6 列。第 7 行强制使用其自己的可扩展行，如果在较小的视口上查看则应该如此。 如何在桌面上查看时使所有行可见，但在较小的视口上保持响应？ jQuery 数据表中的默认值为 6 列吗？ 如果是，我可以将其更改为 7 吗？

阅读数据表文档后，我尝试了各种类来更改断点，如下所示：https://datatables.net/extensions/responsive/classes

这是一个挑战，因为当我在桌面上获得所需的表格后，表格会适应我不想要的较小视口中的行为。示例：“all”类将强制第 7 列在所有屏幕上可见，这是我不想要的。 “min-desktop”将强制第 7 列在桌面或更大的桌面上可见，但会隐藏另一列以进行补偿。对于其他断点类或数据优先级选项也可以这样说：https://datatables.net/extensions/responsive/priority

我越多地使用这些选项来获得我想要的桌面表格，它在较小的视口上看起来就越糟糕。

我尝试过花哨的变通方法，例如强制显示所有数据：

$(document).ready(function() {
    var table = $('#condolistings').DataTable( {
        responsive: {
            details: false
        }
    } );

然后分配表引导类，将我的表隐藏在较小的视口中：“d-none d-xl-block d-lg-block”，然后添加第二个响应表，该表隐藏在具有类的桌面上：“d -lg-none d-xl-none”。它起作用了，但是我的边界在视觉上被“块”类破坏了，所以它不可用。 （见：https://i.imgur.com/hIfHUfz.png）

代码：

<table id="condolistings" class="table table-bordered datatable-font nowrap" style="width:100%;">
                    <thead>
                        <tr>
                            <th><strong>Unit</strong></th>
                            <th><strong># Bed</strong></th>
                            <th><strong># Bath</strong></th>
                            <th><strong>Sq Ft</strong></th>
                            <th><strong>Price</strong></th>
                            <th><strong>Brokerage</strong></th>
                            <th><strong>Favourite?</strong></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>#703</td>
                            <td>2</td>
                            <td>2</td>
                            <td>743</td>
                            <td>$628,000</td>
                            <td>Luxmore Realty</td>
                            <td><a class="colored-link" href="#">Add</a></td>
                        </tr>
                        <tr>
                            <td>#602</td>
                            <td>2</td>
                            <td>2</td>
                            <td>827</td>
                            <td>$649,000</td>
                            <td>Macdonald Realty Westmar</td>
                            <td><a class="colored-link" href="#">Add</a></td>
                        </tr>
                        <tr>
                            <td>#1502</td>
                            <td>2</td>
                            <td>2</td>
                            <td>1103</td>
                            <td>$849,000</td>
                            <td>Coldwell Banker Westburn Rlty</td>
                            <td><a class="colored-link" href="#">Add</a></td>
                        </tr>
                        <tr>
                            <td>#1701</td>
                            <td>3</td>
                            <td>2</td>
                            <td>1265</td>
                            <td>$978,000</td>
                            <td>Regent Park Realty Inc.</td>
                            <td><a class="colored-link" href="#">Add</a></td>
                        </tr>
                        <tr>
                            <td>#2402</td>
                            <td>3</td>
                            <td>3</td>
                            <td>1637</td>
                            <td>$1,308,000</td>
                            <td>RE/MAX Central</td>
                            <td><a class="colored-link" href="#">Add</a></td>
                        </tr>
                    </tbody>
                </table>

$(document).ready(function() {
    var table = $('#condolistings').DataTable( {
        responsive: true,
        "paging":   false,
        "searching": false,
        "info":     false
    } );

    new $.fn.dataTable.FixedHeader( table );
} );

从 Bootstrap 4 中提取的 CSS 文件。

Answer 1

根据official documentation：

响应式具有三种操作模式来控制表中列的可见性：

• 自动 - 响应式将自动确定是否应显示列
• 手册 - 您可以在其中告诉 Responsive 在什么屏幕尺寸上显示哪些列。
• 优先级 - 使用 columns.responsivePriority 告诉响应式哪些列应该被赋予可见性优先级。

当您不为列分配类时，DataTables 将自动确定是否应显示列。因此，如果您想强制在更大的屏幕上显示所有列，则需要将类（desktop、min-desktop 或 all）分配给所有列。

我不认为在小屏幕上切换到自动模式的好方法，因此您需要考虑要在小屏幕上显示哪些列并使用适当的类。

例如，使用以下标记，前三列将显示在所有设备上，后三列将显示在桌面 (>1024px) 设备上。

<thead>
    <tr>
        <th class="all">Name</th>
        <th class="all">Position</th>
        <th class="all">Office</th>
        <th class="desktop">Age</th>
        <th class="desktop">Start date</th>
        <th class="desktop">Salary</th>
    </tr>
</thead>

有关代码和演示，请参阅 this example。