html控制列表宽度,jQuery DataTables：控制表宽度

jQuery DataTables：控制表宽度

我有一个问题，使用jQuery DataTables插件控制表的宽度。 该表应该是容器宽度的100％，但最终是任意宽度，而不是容器宽度。

建议表示赞赏

表声明如下所示

cellpadding="3" width="100%">

和javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){

jQuery('#querytableDatasets').dataTable({

"bPaginate": false,

"bInfo": false,

"bFilter": false

});

}); `

检查Firebug中的HTML，你会看到这一点(注意添加的样式=＆＃34;宽度：0px;＆＃34;)

cellpadding="3" width="100%" style="width: 0px;">

在样式中查看Firebug，table.display样式已被覆盖。 无法看到它的来源

element.style {

width:0;}

-- dataTables.css (line 84

table.display {

margin:0 auto;

width:100%;

}

25个解决方案

57 votes

问题是由于dataTable必须计算其宽度 - 但是当在标签内使用时，它不可见，因此无法计算宽度。 解决方案是调用“fnAdjustColumnSizing＆＃39; 当标签显示时。

前言

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

解决此问题的方法是调用fnAdjustColumnSizing API   功能。 此函数将计算列宽   需要根据当前数据然后重绘表 - 这是   当第一个表变得可见时，确切需要什么   时间。 为此我们使用＆＃39; show＆＃39; jQuery UI表提供的方法。   我们检查是否已经创建了DataTable(请注意   对于＆＃39; div.dataTables_scrollBody＆＃39;的额外选择器，这是在添加时添加的   DataTable已初始化)。 如果表已初始化，我们   重新调整它的大小。 可以添加优化以仅重新调整大小   首先显示表格。

初始化代码

$(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,