jQuery DataTables：控制表宽度

我在使用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，您会看到这一点（请注意添加的样式=“ 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%;  
}  

造成此问题的原因是，dataTable必须计算其宽度-但是在选项卡内部使用时，它不可见，因此无法计算宽度。解决方案是在显示标签时调用“ fnAdjustColumnSizing”。

前言

此示例显示了具有滚动功能的DataTables如何与jQuery UI选项卡一起使用（或初始化表时处于隐藏（display：none）元素中的任何其他方法）。需要特别考虑的原因是，当DataTables初始化且位于隐藏元素中时，浏览器没有任何可提供DataTables的度量，并且在启用滚动功能时，这要求列不对齐。

解决此问题的方法是调用fnAdjustColumnSizing API函数。此函数将基于当前数据计算所需的列宽，然后重新绘制表格-这正是表格首次显示时所需的宽度。为此，我们使用jQuery UI表提供的“ show”方法。我们检查是否已创建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 ] }
        ]
    } );
} );

请参阅此以获取更多信息。

初始化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，然后再尝试查看距离有多近。

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

好吧，我对该插件不熟悉，但是您可以在添加数据表后重置样式吗？就像是

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

.dataTable调用之后？

我在数据表的列宽方面遇到了很多问题。对我来说，魔术解决方案包括

table-layout: fixed;

此CSS与表格的整体CSS一致。例如，如果您已声明数据表，如下所示：

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

那么魔术的css行将进入类Loadtable

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

}

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%");
        }

    });

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

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

显式地sWidth为每个列设置宽度并bAutoWidth: false在dataTable初始化中解决了我的（类似）问题。爱满溢的堆栈。

您必须至少保留一个字段不包含固定字段，例如：

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

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

您可以更改所有内容，但仅将其中一个保留为null，以便可以拉伸。如果将宽度设置为全部，则将无法使用。希望我今天能帮助别人！

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

可以很好地调整整个桌子的宽度。谢谢@Peter Drinnan！

与Datatable 10.1一样，这很简单。只需将width属性放入HTML中的表格即可。即width =“ 100％”，它将覆盖DT设置的所有CSS样式。

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

这里没有任何解决方案对我有用。甚至datatables主页上的示例也无法正常工作，因此无法在show选项中初始化datatable。

我找到了解决问题的办法。诀窍是使用选项卡的activate选项并在可见表上调用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);

});

只是说我遇到了与您完全相同的问题，尽管我只是将JQuery应用于没有任何Ajax的普通表。出于某些原因，Firefox在显示表后不会将其扩展。我通过将表格放在DIV中并将效果应用于DIV来解决了该问题。

您在准备活动中正在这样做吗？

$（document）.ready（function（）{...}）;

大小调整很可能取决于完全加载的文档。

对于使用固定标头插件无法调整表格/单元格宽度的任何人：

数据表依赖thead标签作为列宽参数。这是因为它实际上是唯一的本地html，因为表的大多数内部html都是自动生成的。

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

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

原始的thead“ sWidth”：参数被覆盖（缩小），因为数据表认为您的表的默认宽度仍为％100-无法识别某些单元格已溢出。

为了解决这个问题，我弄清楚了溢出宽度，并在初始化表之后相应地调整了表的大小来解决这个问题。在此期间，我们可以同时初始化固定的标头：

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

在ajax调用的“成功”内部创建您的fixedheader，标题和行中将没有任何对齐问题。

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

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

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

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

不要将桌子放在任何容器中。呈现表格后，将表格的包装器作为容器。我知道这在您与表格一起还有其他地方的地方可能是无效的，但是您始终可以将该内容附加回去。

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

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

（我添加了默认的面板面板）
和您的课程：

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

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

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

数据表力宽表

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

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

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

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

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

我有类似的问题，发现列中的文本不会中断，并且使用此CSS代码解决了该问题

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

这是我的方法。

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

我今天遇到同样的问题。

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

我的代码如下。

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

也检查此解决方案。这轻松解决了我的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();
} );

请参考文档：滚动和引导选项卡

这很好。

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