DataTable单记录时AdminLTE下拉菜单显示异常求助

云原生阿岚

2026-6-16

问题：DataTable仅1条记录时AdminLTE下拉菜单被遮挡，需滚动才能显示完整

我的DataTable中集成了AdminLTE的下拉菜单组件，但当表格里只有1条记录时，下拉菜单无法正常完整显示，必须滚动表格才能看到全部内容。

相关代码

资源引入

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/AdminLTE/adminlte.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>

DataTable初始化代码

var table = $('#tableCA').DataTable({
    ajax: {
        url: '@Url.Action("RequestTable", "CARequest")',
        dataSrc: "data"
    },
    "language": {
        "emptyTable": "No Request Available",
        "processing": "<div class='text-center'><span class='fa fa-spinner fa-pulse'></span> Loading...</div>"
    },
    columns: [
        {
            orderable: false,
            data: "ID",
            render: function (data, type, row) {                             
                var editButton = '';
                var viewButton = '';
                var detailButton = '';
                var approveButton = '';
                if (row.StatusID == 1) {
                    editButton = '<a class="btn btn-xs btn-primary btn-outline js-edit" data-id="' + data + '" title="Edit"><span class="fa fa-pencil-square"></span></a>';
                }
                if (row.StatusID != 1) {
                    viewButton = '<a class="btn btn-xs btn-warning btn-outline js-view" data-id="' + data + '" title="View"><span class="fa fa-eye"></span></a>';
                }
                if (row.StatusID == 2 || row.StatusID == 3) {
                    approveButton =
                            '<a href="#" class="btn btn-xs btn-outline btn-success dropdown-toggle asd" data-toggle="dropdown">'
                                '<span class="fa fa-check"></span>'
                            '</a>'
                            '<ul class="dropdown-menu">'
                                '<li><a href="#" onclick="approve(4, this)" data-id="' + data + '">Approve</a></li>'
                                '<li><a href="#" onclick="approve(3, this)" data-id="' + data + '">For Final Approval</a></li>'
                            '</ul>';
                }
       
                var deleteButton = '<a class="btn btn-xs btn-danger btn-outline js-delete" data-id="' + data + '" title="Delete"><span class="fa fa-trash"></span></a>';
                var detailButton = '<a class="btn btn-xs btn-warning btn-outline js-detail" data-id="' + data + '" title="Breakdown/Detail budget"><span class="fa fa-list"></span></a>';                            
                return approveButton + ' ' + viewButton + ' ' + detailButton + ' ' + deleteButton + ' ' + editButton;
            }
        },
    ],
    order: [1, 'asc'],
    scrollY: '50vh',
    scrollCollapse: true,
    paging: false,
    info: true,
    ordering: true,
    searching: true,
    scrollX: true,
    deferRender: true,
    processing: true
})

已尝试的方法

我曾给下拉菜单添加z-index属性，但问题仍未解决。

解决方法

方法1：修改下拉菜单定位规则

因为DataTable设置了scrollY: '50vh'，容器会被加上overflow: auto，导致下拉菜单被裁剪。可以通过CSS让下拉菜单脱离表格滚动容器：

/* 让下拉菜单基于视口定位，不受表格容器溢出限制 */
.tableCA .dropdown-menu {
  position: fixed !important;
  z-index: 9999;
}

方法2：调整Bootstrap下拉组件的边界设置

利用Bootstrap Dropdown的boundary选项，让菜单相对于视口而非表格单元格定位，避免被容器裁剪。在表格绘制完成后重新初始化下拉组件：

// 监听DataTable绘制完成事件，重新初始化下拉
$('#tableCA').on('draw.dt', function() {
  $('.dropdown-toggle').dropdown({
    boundary: 'viewport'
  });
});

方法3：修改DataTable滚动容器的溢出属性

找到DataTable自动生成的滚动容器（通常类名为.dataTables_scrollBody），移除其垂直溢出限制：

.dataTables_scrollBody {
  overflow-y: visible !important;
}

这个方法适合不需要表格滚动的场景，或者当数据量少时自动适配高度。

方法4：动态调整表格高度

取消固定的scrollY设置，改为根据内容动态调整表格高度，避免容器出现滚动条：

// 移除固定高度设置，让表格随内容自适应
scrollY: false,
// 保留scrollCollapse让表格在数据少时收缩
scrollCollapse: true

内容的提问来源于stack exchange，提问作者beans

DataTable单记录时AdminLTE下拉菜单显示异常求助

相关截图说明 #

相关代码 #