问最初呈现的表头宽度不正确，如果单击其中一个Th，就会自动修复。
EN

Stack Overflow用户

提问于 2013-12-31 05:28:05

回答 1查看 151关注 0票数 0

我读过很多关于这方面的东西，但我想找点运气！

问题：

我正在使用数据表来实现对表的排序。在UI中，我有四个选项卡，每个选项卡都有一个表。现在，在我使用"sScrollY“属性之前，一切都很好。一旦我设置了一些值，默认情况下，我的“头”的宽度将从100%更改为100 my。(表中“tbody”部分的呈现方式与此相同。)如果我点击其中的一个，导致表重绘调用(FnDraw)内部，适当调整头的宽度。

请帮我把这个处理掉。

我尝试过的解决办法：

设置表-布局:固定；我已将这种样式应用于我的所有表
在“sScrollY”的情况下，将溢出自动设置为包装'thead‘的包装器div；尝试了这一点，并进行了工作
在单击选项卡时调用fnDraw；尝试使用fn DrawCallback来确认是否调用了绘图方法，但它必须纠正头的对齐。
调用fnColumnResizing()；这只是我把它放在window.resize()中的工作，然后手动调整窗口的大小。
在输入数据时设置sWidth属性；这种能力也是有效的！

代码：

我用于init数据存储的代码是：

oTable = $('#dataTableId').dataTable( {
        "sDom": "t",
        "sScrollY": getDivHeight(), //getDivHeight() returns a string val eg. 300px
        "bPaginate": false,
        "bDeferRender": true,
        "asStripeClasses": ['test', 'test'],
        "bAutoWidth": false,
        "aaSorting": [[0,'desc']], 
        "aoColumnDefs": [
                         { "bSortable": true,"aTargets": [ 0 ]},
                         { "bSortable": true,"aTargets": [ 1 ]},
                         { "bSortable": true,"aTargets": [ 2 ]},
                         { "bSortable": false,"aTargets": [ 4 ]},
                         { "bSortable": true,"aTargets": [ 4 ]},
                         { "bSortable": false,"aTargets": [ 5 ]}
                       ],
         "aoColumns": [null,null,null,{ "iDataSort": 4 },null,null,null]
    } );

感谢和快乐的编码！

javascript

jquery

css

datatables

jquery-datatables

回答 1

Stack Overflow用户

发布于 2013-12-31 16:17:41

设置sScrollY属性时，调用以下函数(sY = sScrollY)

/**
     * Adjust a table's width to take account of scrolling
     *  @param {object} oSettings dataTables settings object
     *  @param {node} n table node
     *  @memberof DataTable#oApi
     */
    function _fnScrollingWidthAdjust ( oSettings, n )
    {
        if ( oSettings.oScroll.sX === "" && oSettings.oScroll.sY !== "" )
        {
            /* When y-scrolling only, we want to remove the width of the scroll bar so the table
             * + scroll bar will fit into the area avaialble.
             */
            var iOrigWidth = $(n).width();
            n.style.width = _fnStringToCss( $(n).outerWidth()-oSettings.oScroll.iBarWidth );
        }
        else if ( oSettings.oScroll.sX !== "" )
        {
            /* When x-scrolling both ways, fix the table at it's current size, without adjusting */
            n.style.width = _fnStringToCss( $(n).outerWidth() );
        }
    }

我怀疑.width()和outerWidth()没有按预期工作，原因如下：

在触发$(window).load事件之前调用函数。解决这一问题的方法是将函数封装在$(window).load()中，而不是$(document).ready()中。
您提到了有几个表的选项卡。如果这只发生在最初隐藏的制表符中的表上，这是因为一些宽度命令不适用于隐藏元素(display: none)。参见下面的示例http://jsfiddle.net/XLET8/

经典的解决方案是将元素放置在屏幕上，检查宽度，然后隐藏它并将其放回屏幕上。(您可能会在一个命令中找到一个jquery插件。)

或者，您可以在打开选项卡时初始化datatable。--或者用一个按钮手动加载它。(我不认为fnDraw调用上面显示的函数--因此原始的-不正确的宽度仍将加载在datatable配置中)

编辑

我刚刚看到了此链接，它描述了如何处理选项卡中的数据。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20858140

复制

TDesign 更新周报（2022年4月第1周）

react vue.js github

详情见：https://github.com/Tencent/tdesign-vue/releases/tag/0.40.1