Question

我使用datatables使用了scrollY actived和AdminLTE2主题：

acquisitionTable = $('#acquisitionsTable').DataTable({
            responsive: true,
//          "bLengthChange": false,
            deferRender:    true,
            scrollY:        '60vh',
            scrollCollapse: true,
            scroller:       true,

问题是当侧边栏折叠时标题对齐

这个问题很普遍，但我尝试的所有解决方案都失败了。我想打电话给acquisitionTable.columns.adjust();，但我怎么能抓住崩溃和扩大事件呢？这是侧栏：

<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
        <!-- Sidebar user panel -->
        <div class="user-panel">
            <div class="pull-left image">
                <img th:src="@{/static/assets/dist/img/fca.jpg}" class="img-circle"
                    alt="User Image">
            </div>
            <div class="pull-left info">
                <p sec:authentication="principal.name"></p>
                <i class="fa fa-circle text-success"></i> Online
            </div>
        </div>
        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu">
            <li class="header">MAIN NAVIGATION</li>
            <li><a th:href="@{/}"> <i class="fa fa-dashboard"></i> <span>Dashboard</span>
            </a></li>
            <li sec:authorize="hasRole('ROLE_ADMIN')" class="treeview"><a
                href="#"> <i class="glyphicon glyphicon-cog"></i> <span>Administration</span>
                    <span class="label label-primary pull-right">5</span>
....

在侧边栏折叠时，从文档（我用调试模式检查）中，类.sidebar-collapse被添加到body标签中。感谢

Answer 1

目前我用这段代码解决了问题：

divW = jQuery("#contentAreaId").width();
setInterval(function(){
    var w = jQuery("#contentAreaId").width();
    if (w != divW) {
        acquisitionTable.columns.adjust();
        divW = w;
    }       
},100);

Answer 2

您是否尝试过css min-width选项，例如：

.dataTables_scrollHead table {
    min-width: 100%;
}

您也可以添加：

table-layout: fixed;

折叠侧边栏时数据表标题对齐：触发类更改

2 个答案: