Question

我有一个有趣的问题，我认为我用一个笨拙的解决方案解决了，但我只有一半解决了它。我正在使用Datatables for Jquery，并且我正在从数据库加载数据以填充表格。

我应该注意到使用Firefox进行开发。

此外，我有一个水平滚动条，前五列是固定的。这会产生问题，因为在加载所有数据之前，数据表放入水平滚动条。在滚动条初始化之后加载的一些数据的长度更长，因此使列宽更大。

要解决此问题，我只需调用大小调整

<script type="text/javascript">
setTimeout(function(){
    window.dispatchEvent(new Event('resize'));
},2000);
</script>

这里发生的事情是我看到页面加载，表格最初搞砸了，但是经过短暂的延迟（由于我已经给出了超时的时间，因为它应该是2秒），由于窗口调整大小，表格自行修复。

我认为问题已解决，直到我开始在Chrome中进行测试。该表最初会搞砸，就像在Firefox中一样，但是一旦调用了调整大小，表就会水平延伸，丢失水平滚动条，并且chrome窗口会得到一个。这并不理想，因为滚动条的目的是使表格保持在屏幕尺寸的宽度内。

要包含表格的宽度，我使用以下CSS：

div.dataTables_wrapper{
    width: 96vw;
    margin: 0 auto;
}

我像这样定义表。

$(document).ready(function() {
    $('#example').dataTable( {
        "scrollX": true
    } );
} );

new $.fn.dataTable.FixedColumns(example,{
    leftColumns:5
});

感谢任何帮助。

Answer 1

您必须强制width的{{1}}到datatables_scrollBody才能保持水平条可见。

100%

Jquery Datatable在Resize上丢失水平滚动条

1 个答案: