Jquery DataTable 中的滚动问题

Posted 2023-05-07

【中文标题】Jquery DataTable 中的滚动问题

【英文标题】：Scroll issue in Jquery DataTable

【发布时间】：2013-04-11 05:19:27

【问题描述】：

如果是的话，我不确定我是否在重复这个问题：)

我正在使用数据表并尝试实现水平滚动并找到此链接

http://www.datatables.net/examples/basic_init/scroll_x.html

我在我的数据表代码中使用了这些属性，但在 UI 中遇到了问题。

我的数据有水平滚动条，但我的列没有展开，也没有按预期工作。我的正常列下方有额外的空列。

基本上我的用户界面是乱七八糟的。我看到了一个关于相同的旧线程讨论！

DataTables fixed headers misaligned with columns in wide tables

这些问题现在有解决方案吗？

=================================

添加示例代码

$("#results").dataTable(
    "aaData": [
        //My data
    ],
    "aoColumns": [
        //My Columns
    ],
    "bPaginate": true,
    "bSort": true,
    "bFilter": false,
    "bJQueryUI": false,
    "bProcessing": true,
    "sScrollX": "100%",
    "sScrollXInner": "110%",
    "bScrollCollapse": true
);

【问题讨论】：

添加了示例代码。我没有为列设置任何明确的宽度

您发布的内容没有任何问题。所以，还有别的原因。另外，您是否检查过您是否真的需要"sScrollXInner": "110%"？检查有关此属性的注释：还要注意，此处使用 sScrollXInner 来强制表格比严格需要的更宽。根据您的应用程序，您可能希望也可能不希望包含此参数。

如果我添加 sScrollX 它会在我的表中添加一个额外的空列会发生什么？

【参考方案1】：

我遇到了类似的问题，但以不同的方式解决了。

我修改了sDom 参数以将表格包装在一个额外的div 中：

sDom: 'r<"H"lf><"datatable-scroll"t><"F"ip>',

然后我将以下样式应用于.datatable-scroll 类：

/**
 * Makes the table have horizontal scroll bar if its too wide for its container
 */
.datatable-scroll 
    overflow-x: auto;
    overflow-y: visible;

http://datatables.net/usage/options#sDom

【讨论】：

您的解决方案很棒。我一直在测试许多解决 Scroll 头部和身体对齐问题的解决方案，但在所有浏览器中都没有任何效果。这个解决方案是完美的，跨浏览器并且不会通过更多的 hack 调用使 javascript 过载。 （我正在编辑您的答案以通过另一个示例添加更多信息）。太感谢了！ :)

在互联网上对滚动进行了令人厌烦的研究后找到了迄今为​​止的最佳答案。但是，您可能想添加 float: left;宽度：你的值px； position: relative; 在 .datatable-scroll 类中，以便兼容 IE7 & IE8 浏览器。因为我必须添加这些值。此外，如果你只需要水平滚动条，你将不得不使用 overflow-x:scroll; overflow-y: hidden; 否则会在 IE 中产生副作用。无论如何，非常感谢哥们！！