Question

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

我的桌子正在调整大小，但是没有调整大小

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

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

Answer 1

我认为我采取的方法不是很聪明，但是我还是找不到选择。

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

第二，我给css加上了force（！important）选项。

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

无论如何它都可以，但是我真的很想找到优雅的解决方案。

祝你好运

Answer 2

尝试将autoWidth添加到false

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

或者您可以resize()关于窗口调整大小事件的表格

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

修改

在我的本地电脑中，此代码只能添加"autoWidth": false并删除scrollY或"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
});

DataTable使用ScrollY渲染（表体正在调整大小但是没有调整大小）

2 个答案: