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

Question

我已经阅读了很多这方面的资料，但没有找到任何运气!

问题:
我正在使用数据表来实现对表的排序。在 UI 上，我有四个选项卡，每个选项卡都有一个表格。现在一切正常，直到我使用“sScrollY”属性。一旦我为此设置了一些值，默认情况下我的“头”宽度就会从 100% 变为 100px。 (表格的“tbody”部分以相同的方式呈现。)如果我单击其中一个“th”，这会在内部导致表格重绘调用(fnDraw)，适当调整 thead 的宽度。

请帮我摆脱这个。

我尝试过的解决方案:

• 设置表格布局:已修复；我已将这种风格应用到我所有的 table 上
• 在“sScrollY”的情况下，将溢出自动设置为包装“thead”的包装器 div；尝试了这个，它成功了
• 在点击选项卡时调用 fnDraw；试过这个，使用 fn DrawCallback 来确认 draw 方法被调用，但它纠正了 thead 的对齐方式。
• 调用 fnColumnResizing() ；这只适用于我将它放在 window.resize() 中，然后手动调整窗口大小。
• 在初始化数据表时设置 sWidth 属性；这也行!

代码:
我用来初始化数据表的代码是:

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]
    } );

谢谢，编码愉快!

Answer 1

当设置 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() 没有按预期工作是由于以下原因之一:

1. 函数在 $(window).load 事件被触发之前被调用。解决方案是将函数包装在 $(window).load() 中，而不是 $(document).ready()

2. 您提到您有几个带有表格的选项卡。如果这只发生在最初隐藏的选项卡中的表格上，那是因为某些宽度命令不适用于隐藏元素(显示:无)。看这个例子http://jsfiddle.net/XLET8/

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

或者，您可以在打开选项卡时初始化数据表。 -- 或者通过一个手动加载它的按钮。 (我不认为 fnDraw 调用了上面显示的函数——所以原始的——不正确的宽度仍然会加载到数据表配置中)

编辑

我刚刚遇到 this link其中描述了如何处理选项卡内的数据表。