jQuery DataTables：控制表格宽度答案

【问题标题】：jQuery DataTables: control table widthjQuery DataTables：控制表格宽度
【发布时间】：2010-10-10 22:26:06
【问题描述】：

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

建议表示赞赏

表声明如下所示

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

还有 javascript

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

在 Firebug 中检查 HTML，您会看到这一点（注意添加的 style="width: 0px;"）

<table id="querytableDatasets" class="display" cellspacing="0" 
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%;  
}

【问题讨论】：

仅供参考，我刚刚遇到了一个问题，即列在 IE8 中没有正确调整。罪魁祸首是具有max-width 属性集的图像。显然 IE8 不太喜欢该属性，并且在数据表方面忽略了它，即使图像在屏幕上的大小正确。将其更改为 width 解决了问题。

标签： jquery datatables jquery-datatables

【解决方案1】：

这个问题是因为 dataTable 必须计算它的宽度 - 但是当在选项卡内使用时，它是不可见的，因此无法计算宽度。解决方案是在选项卡显示时调用“fnAdjustColumnSizing”。

序言

这个例子展示了如何一起使用带有滚动功能的 DataTables 使用 jQuery UI 选项卡（或实际上任何其他方法，该表是在初始化时隐藏的（显示：无）元素中）。原因这需要特别考虑，是当 DataTables 是初始化并且它在隐藏元素中，浏览器没有用于提供 DataTables 的任何测量值，这将需要在启用滚动时列未对齐。

解决这个问题的方法是调用 fnAdjustColumnSizing API 功能。此函数将计算列宽根据当前数据需要，然后重新绘制表格 - 这是当表格第一次可见时正是需要的时间。为此，我们使用 jQuery UI 表提供的“显示”方法。我们检查 DataTable 是否已创建（注意 'div.dataTables_scrollBody' 的额外选择器，当 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,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

请参阅this 了解更多信息。

【讨论】：

我对@John McC 也有同样的问题，但是，我将我的数据表应用于模态，我正在使用引导程序并且我遇到了这个问题..你知道如何实现它使用引导模式而不是选项卡？..我真的需要你的帮助
我推荐使用window.resize，看一个例子legacy.datatables.net/ref#fnAdjustColumnSizing
"aoColumnDefs": [{ "sWidth": "10%", "aTargets": [ -1 ] }]。我解决了我的问题，只需添加这个，谢谢。

【解决方案2】：

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

【讨论】：

这对我来说是正确的答案。我正在使用 boostrap .table-responsive。使用数据表代码设置它自己的宽度，它会妨碍。
来到这里发布我对这个愚蠢问题的解决方案，该问题涉及删除选项卡更改事件上的宽度属性，但这似乎已经修复了它。谢谢。 +1
我在前两个选项卡上有 3 个选项卡和数据表，第二个选项卡上的表不是全宽的。这解决了我的问题。谢谢

【解决方案3】：

在初始化 dataTables 时，您需要调整两个变量：bAutoWidth 和 aoColumns.sWidth

假设您有 4 列，宽度分别为 50px、100、120px 和 30px，您会这样做：

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    });

更多关于dataTables初始化的信息可以在http://datatables.net/usage找到

注意此 widhts 设置与您应用的 CSS 之间的交互。您可以在尝试此操作之前评论您现有的 CSS，看看您有多接近。

【讨论】：

嗯。你要说的是，这是 bAutoWidth:true 对列宽做出不是特别明智的选择的结果。
这就是我的想法。如果数据的长度不一致，我的表格会反弹。这就是我放入 aoColumns 和 bAutoWidth 参数的原因。
漂亮。完全解决了我的问题。
太棒了@Laguna！喜欢听到像这样的旧答案一直很有帮助。
"bAutoWidth": 错误的作品。但只是一个问题。如果我在我的标签上添加宽度细节，这是否是一个好习惯？

【解决方案4】：

好吧，我不熟悉那个插件，但是你能在添加数据表后重新设置样式吗？类似的东西

$("#querydatatablesets").css("width","100%")

.dataTable 调用之后？

【讨论】：

我发现这也是最好的解决方案，因为在我的情况下，当任何列不可见时，表格也被设置为 100px 宽度 - 请参见此处：datatables.net/forums/discussion/3417/…
这是对我有用的解决方案。与 oTable.fnAdjustColumnSizing() 相比，它可以更好地控制数据表的 css；前面提到的解决方案。

【解决方案5】：

我在数据表的列宽方面遇到了很多问题。对我来说，神奇的解决方法是包含这条线

table-layout: fixed;

这个 css 与表格的整体 css 一致。例如，如果您已声明如下数据表：

LoadTable = $('#LoadTable').dataTable.....

那么神奇的 css 行将进入类 Loadtable

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

【讨论】：

这有帮助，但现在我的列都是奇怪的大小。我原以为数据最多的列会占用最大的百分比宽度。
当你的表格有水平滚动时，这会失败。

【解决方案6】：

TokenMacGuys 解决方案效果最好，因为这是 jQdataTable 中的错误的结果。如果您使用 $('#sometabe').dataTable().fnDestroy() 会发生什么情况，表格宽度将设置为 100px 而不是 100%。这是一个快速修复：

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

【讨论】：

【解决方案7】：

你必须至少留下一个没有固定字段的字段，例如：

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

您可以全部更改，但只保留一个为空，以便它可以拉伸。如果你把宽度放在 ALL 上，它将不起作用。希望我今天帮助了某人！

【讨论】：

对我来说就是这样，我将所有列设置为 1px。留下一个让它神奇地工作。谢谢！

【解决方案8】：

将此css类添加到您的页面，它将解决问题：

#<your_table_id> {
    width: inherit !important;
}

【讨论】：

过去 30 分钟我一直在努力解决一个单独的问题 - 这行代码修复了它 - 所以我只想对这个随机评论表示感谢。
这正是我给出额外答案的原因

【解决方案9】：

在dataTable 初始化中使用sWidth 和bAutoWidth: false 为每列显式设置宽度解决了我的（类似）问题。喜欢溢出的堆栈。

【讨论】：

【解决方案10】：

与 Datatable 10.1 一样，这是直截了当的。只需将宽度属性放在 HTML 中的表格中即可。即 width="100%"，这将覆盖 DT 设置的所有 CSS 样式。

看到这个http://www.datatables.net/examples/basic_init/flexible_width.html

【讨论】：

【解决方案11】：

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

这可以很好地调整整个表格的宽度。谢谢@Peter Drinnan！

【讨论】：

我无法让表格正确填充其父容器。尝试将表格及其包装器的 css 调整为宽度：100%；没有明显的区别。一旦我尝试了上述方法，它就会产生奇迹，但是我没有指向包装器，而是我必须指向它自己的表。但是非常感谢尼拉尼！

【解决方案12】：

这里的解决方案都不适合我。甚至 datatables homepage 上的示例也无法正常工作，因此在 show 选项中初始化数据表。

我找到了解决问题的方法。诀窍是对标签使用激活选项并在可见表上调用 fnAdjustColumnSizing()：

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

【讨论】：

【解决方案13】：

只是说我遇到了和你完全相同的问题，虽然我只是将 JQuery 应用于没有任何 Ajax 的普通表。出于某种原因，Firefox 在显示表格后并未将其展开。我通过将表格放在 DIV 中并将效果应用到 DIV 来解决问题。

【讨论】：

【解决方案14】：

您是在准备好的活动中这样做吗？

$(document).ready(function() { ... });

大小很可能取决于文档是否已完全加载。

【讨论】：

查看上面的代码 - 它发生在 div 容器 #tab-datasets 的 ajax 加载的回调中。表#querytableDatasets 由/cgi-bin/qryDatasets 提供
我明白这一点，但我不确定发生这种情况的时间。在查看插件源时，它似乎唯一可以设置 0px 宽度的时间是它无法确定正确的表 offSetWidth 并且我认为这与运行太早有关。
嗯。我假设在加载表 #querytableDatasets 之后调用来自 ajax 加载的回调。你认为情况可能不是这样吗？
顺便说一句，回答您关于何时运行的问题，这是对用户单击按钮的响应
嗯，我不确定我可以添加更多内容。如果是按钮单击，则文档已完全加载，没有理由将其放入就绪事件中。您可能会调整表格容器的宽度，或者尝试让它们的（DataTables 插件）在您当前的布局之外工作。

【解决方案15】：

也检查此解决方案。这很容易解决了我的 DataTable 列宽问题

JQuery DataTables 1.10.20 引入了 columns.adjust() 方法来修复 Bootstrap 切换选项卡问题

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

请参考文档：Scrolling and Bootstrap tabs

【讨论】：

我猜这个解决方案是最新的解决方案。为我工作

【解决方案16】：

对于使用固定标题插件调整表格/单元格宽度时遇到问题的任何人：

数据表依赖于列宽参数的广告标签。这是因为它确实是唯一的原生 html，因为大部分表格的内部 html 都是自动生成的。

但是，您的某些单元格可能会大于存储在 thead 单元格内的宽度。

即如果您的表格有很多列（宽表格）并且您的行有很多数据，那么调用“sWidth”：更改 td 单元格大小将无法正常工作，因为子行会根据溢出内容自动调整 td 的大小这发生在表被初始化并传递了它的 init 参数之后。

原来的thead“sWidth”：参数被覆盖（缩小），因为datatables认为你的表格仍然有它的默认宽度%100——它没有识别出一些单元格溢出。

为了解决这个问题，我计算出溢出宽度，并通过相应地调整表格的大小来解决它在表格已经初始化之后——当我们这样做时，我们可以在同时：

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

【讨论】：

【解决方案17】：

在 ajax 调用的“成功”内创建您的固定标题，标题和行不会有任何对齐问题。

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}

【讨论】：

【解决方案18】：

希望这对仍在苦苦挣扎的人有所帮助。

不要将您的桌子放在任何容器中。表格呈现后，将表格的包装器设为您的容器。我知道这在你有其他东西的地方可能是无效的，但你可以随时附加该内容。

对我来说，如果你有一个侧边栏和一个实际上是该侧边栏偏移量的容器，就会出现这个问题。

$(YourTableName+'_wrapper').addClass('mycontainer');

（我添加了一个面板面板-默认）
还有你的班级：

.mycontainer{background-color:white;padding:5px;}

【讨论】：

【解决方案19】：

找到另一个关于这个问题的有用链接，它解决了我的问题。

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Datatables force width table

【讨论】：

【解决方案20】：

在将 div 包裹在桌子上时，我遇到了类似的问题。

添加位置：为我相对固定。


#report_container {
 float: right;
 position: relative;
 width: 100%;
}

【讨论】：

【解决方案21】：

我有一个类似的问题，表格的内容大于表格的页眉和页脚。在桌子周围添加一个 div 并设置 x-overflow 似乎已经解决了这个问题：

【讨论】：

【解决方案22】：

确保 bAutoWidth 和 aoColumns 之前的所有其他参数都正确输入。之前的任何错误参数都会破坏此功能。

【讨论】：

【解决方案23】：

我遇到了类似的问题，发现列中的文本没有中断，使用这个 css 代码解决了这个问题

th,td{
max-width:120px !important;
word-wrap: break-word
}

【讨论】：

【解决方案24】：

这是我的做法..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

【讨论】：

【解决方案25】：

我今天遇到了同样的问题。

我使用了一种棘手的方法来解决它。

我的代码如下。

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

【讨论】：

【解决方案26】：

这很好用。

#report_container {
   float: right;
   position: relative;
   width: 100%;
}

【讨论】：