4

我正在使用数据表并将 ScrollY 添加到其中...所以当我有很多列而我的屏幕无法容纳所有列时，它只会以数据表的形式添加垂直滚动....问题是管理员有一个可以隐藏和显示侧边栏的功能，它会改变数据表的整体区域，结果它会像这样呈现错误：

我的表格主体正在调整大小，但未调整大小

这是我的临时页面的测试链接 https://htmlpreview.github.io/?https://github.com/farazGreen/DataTable/blob/master/GreenBow_%20TEST.html

ADMINLTE 网站 https://github.com/almasaeed2010/AdminLTE/issues/1136中的另一个人也提出了同样的问题

4

2 回答 2

1

我认为我采取的方式不是很聪明，但我无论如何都找不到选项。

首先，通过使用 chrome dev.tool，我发现相关表格层的像素宽度非常有限，由数据表定义。

其次，我给出了带有 force(!important) 选项的 css 宽度。

<style>
    .dataTables_scrollHead {
        width: 100% !important;
    }
    .dataTables_scrollHeadInner {
        width: 100% !important;
    }
    .dataTable  {
        width: 100% !important;
    }
</style>

无论如何它有效，但我真的想找到优雅的解决方案。

祝你好运

于 2018-10-02T07:42:45.487 回答
0

尝试添加autoWidth到false 

$('#example').dataTable( {
  "autoWidth": false
} );

或者您可以resize()在窗口调整大小事件上表

$(window).resize(function () {
            $("#example").resize();
});

编辑

在我的本地电脑中，此代码只能添加"autoWidth": false和删除scrollYor"scrollY":""

$('#tblOpWaiting').DataTable({
    "bFilter" : false,
    "ordering" : false,
    "scrollY" : "",
    "scrollCollapse" : true,
    responsive : true,
    "paging" : false,
    autoWidth:false
});
$('#tblOpConsulted').DataTable({
    "bFilter" : false,
    "ordering" : false,
    "scrollY" : "",
    "scrollCollapse" : true,
    responsive : true,
    "paging" : false,
    autoWidth:false
});
于 2016-08-04T07:17:51.977 回答