jQuery DataTables:控制表格宽度 [英] jQuery DataTables: control table width

问题描述

我在使用 jQuery DataTables 插件控制表格宽度时遇到问题.表格应该是容器宽度的 100%，但最终是任意宽度，而不是小于容器宽度.

I have a problem controlling the width of a table using the jQuery DataTables plugin. The table is supposed to be 100% of the container width, but ends up being an arbitrary width, rather less than the container width.

感谢建议

表格声明如下

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

还有 javascript

And the javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

在 Firebug 中检查 HTML，您会看到这个(注意添加的 style="width: 0px;")

Inspecting the HTML in Firebug, you see this (note the added style="width: 0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

在 Firebug 中查看样式，table.display 样式已被覆盖.看不出这是从哪里来的

Looking in Firebug at the styles, the table.display style has been overridden. Can't see where this is coming from

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

推荐答案

该问题是因为 dataTable 必须计算其宽度 - 但在选项卡内使用时，它不可见，因此无法计算宽度.解决方案是在选项卡显示时调用fnAdjustColumnSizing".

The issue is caused because dataTable must calculate its width - but when used inside a tab, it's not visible, hence can't calculate the widths. The solution is to call 'fnAdjustColumnSizing' when the tab shows.

序言

这个例子展示了如何一起使用带有滚动功能的数据表使用 jQuery UI 选项卡(或者实际上是表格的任何其他方法)在初始化时隐藏的 (display:none) 元素中).原因这需要特别考虑，就是当 DataTables 是初始化并且它在一个隐藏元素中，浏览器没有用于提供数据表的任何测量，这将需要在启用滚动时列未对齐.

This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed any other method whereby the table is in a hidden (display:none) element when it is initialised). The reason this requires special consideration, is that when DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements with which to give DataTables, and this will require in the misalignment of columns when scrolling is enabled.

解决这个问题的方法是调用 fnAdjustColumnSizing API功能.此函数将计算列宽根据当前数据需要，然后重新绘制表格 - 这是当表第一次变得可见时正是需要的时间.为此，我们使用 jQuery UI 表提供的show"方法.我们检查 DataTable 是否已经创建(注意'div.dataTables_scrollBody' 的额外选择器，当数据表已初始化).如果表已经初始化，我们重新调整大小.可以添加优化以仅重新调整大小表格的首次展示.

The method to get around this is to call the fnAdjustColumnSizing API function. This function will calculate the column widths that are needed based on the current data and then redraw the table - which is exactly what is needed when the table becomes visible for the first time. For this we use the 'show' method provided by jQuery UI tables. We check to see if the DataTable has been created or not (note the extra selector for 'div.dataTables_scrollBody', this is added when the DataTable is initialised). If the table has been initialised, we re-size it. An optimisation could be added to re-size only of the first showing of the table.

初始化代码

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

有关详细信息，请参阅此.

See this for more info.

这篇关于jQuery DataTables:控制表格宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！