jQuery DataTables：控制表格宽度

Posted 2023-05-07

【中文标题】jQuery DataTables：控制表格宽度

【英文标题】：jQuery DataTables: control table width

【发布时间】：2010-10-10 22:26:06

【问题描述】：

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

建议表示赞赏

表声明如下所示

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

还有 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"  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 解决了问题。

【参考方案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 中的表格中即可。 即 ，这将覆盖 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');

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

.mycontainerbackground-color:white;padding:5px;

【参考方案19】：

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

<table >
<tr>
    <td > Left TD <td>
    <td > 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%;