jquery - 数据表隐藏列本身

Question

什么可能导致我的专栏被隐藏/压缩。加号位于该行旁边。抱歉，我不确定检查数据表网站的名称是什么。

在显示模式后调用列调整来修复标题后会发生这种情况。

    var dtUsers = $('#table-user-results').DataTable({
        scrollY: "40vH",
        scroller: true,
        responsive: true
    });

    $(document).on('shown.bs.modal', '#list-manage-users-modal', function () {
        dtUsers.columns.adjust().draw();
    });

表格

<table id="table-user-results" class="table table-striped table-bordered table-hovered dataTable">
                <thead class="">
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var user in Model)
                    {
                        <tr id="@user.ID" class="@(!user.Email.Equals(User.Identity.Name, StringComparison.InvariantCultureIgnoreCase) ? "user-results-context" : "")">
                            <td>@user.LastName, @user.FristName</td>
                            <td>@user.Email</td>
                            <td>@user.RoleName</td>
                        </tr>
                    }
                </tbody>
            </table>

问题更新

因此，当没有足够的数据需要滚动条时，就会触发该问题。

Answer 1

您正在使用Responsive当列不适合 View 时隐藏列的扩展。

但是，如果您在模式窗口中显示表格，响应式扩展程序可能无法正确检测列宽，因为表格最初是隐藏的。

解决方案是使用responsive.recalc()除了 columns.adjust() 之外的 API 方法。

由于您使用的是 Scroller 扩展，因此还需要调用 scroller.measure() API方法。

请参阅下面的代码:

$(document).on('shown.bs.modal', '#list-manage-users-modal', function (){
    $($.fn.dataTable.tables(true)).DataTable()
       .columns.adjust()
       .responsive.recalc()
       .scroller.measure();
});

此外，您还需要包含 scrollCollapse: true 选项，因为这两个扩展中似乎存在不兼容错误。请参阅issue #854 on GitHub了解更多详情。

参见this example用于代码和演示。