小编lee*_*old的帖子

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

我正在使用具有 7 列的响应式数据表。在其模板中查看它(它是更大的表格):http : //darasu.xyz/DatatableExample/datatable-ex.html

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

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

它似乎只允许跨越 6 列。第 7 行被迫拥有自己的可扩展行,就像在较小的视口上查看一样。在桌面上查看时如何使所有行可见,但在较小的视口上保持响应?6 列是 jQuery 数据表中的默认值吗?如果是这样,我可以将其更改为 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
        }
    } );
Run Code Online (Sandbox Code Playgroud)

然后分配将我的表隐藏在较小视口中的表引导程序类:“d-none d-xl-block d-lg-block”,然后添加第二个响应表,该表隐藏在带有类的桌面上:“d-lg-无 d-xl-无”。它起作用了,但我的边框在视觉上被“块”类弄乱了,所以它不可用。(参见: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> …
Run Code Online (Sandbox Code Playgroud)

jquery datatables bootstrap-4

1
推荐指数
1
解决办法
5035
查看次数

标签 统计

bootstrap-4 ×1

datatables ×1

jquery ×1