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选项卡（或实际上任何其他方法，表是
在一个隐藏的（显示：none）元素，当它被初始化）。
这个原因需要特别考虑的原因是，当DataTables是
初始化，它是一个隐藏的元素，浏览器不没有
任何测量与gi数据表，并且在启用滚动时，这将需要
的列错位。

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'的
额外选择器，这是在
DataTable初始化时添加的）。如果表已初始化，我们
重新设置大小。可以添加一个优化来重新调整
首先显示的表。

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.

初始化代码

Initialisation code

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

请参阅此获取更多信息。

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