jQuery DataTables：控制表宽度

Question

我在使用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，你会看到这一点（注意添加的样式=＆quot; width：0px;＆quot;）

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

Answer 1

问题是由于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 ] }
        ]
    } );
} );

有关详情，请参阅此。

Answer 2

初始化dataTable时，您需要调整两个变量： 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，看看你有多接近。

Answer 3

好吧，我不熟悉那个插件，但是你可以在添加数据表之后重置样式吗？像

这样的东西

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

在.dataTable调用之后

？

Answer 4

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

Answer 5

我对数据表的列宽有很多问题。对我来说，神奇的解决方法包括

行

table-layout: fixed;

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

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

然后魔术css行将进入类Loadtable

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

}

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

    });

Answer 7

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

Answer 8

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

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

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

你可以改变所有，但只留下一个为空，所以它可以拉伸。如果你把宽度放在ALL上它就行不通。希望我今天能帮到别人！

Answer 9

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

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

Answer 10

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

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

Answer 11

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

请参阅此 http://www.datatables.net/examples/basic_init/flexible_width。 HTML

Answer 12

这里没有一个解决方案适合我。甚至数据表主页上的示例也无效，因此初始化了数据表中的数据表。显示选项。

我找到了问题的解决方案。诀窍是使用激活选项作为标签，并在可见表格上调用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);

});

Answer 13

只是说我和你有完全相同的问题，虽然我只是将JQuery应用于没有任何Ajax的普通表。出于某种原因，Firefox在揭示它之后不会扩展表格。我通过将表放在DIV中，然后将效果应用到DIV来解决问题。

Answer 14

你是否在准备好的活动中这样做？

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

调整大小很可能取决于文档是否已满载。

Answer 15

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

Datatables依赖于列标签参数的thead标签。这是因为它真的是唯一的原生html，因为大多数表的内部html都是自动生成的。

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

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

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

为了解决这个问题，我想出了溢出宽度并通过在表初始化之后相应地调整表来解决它 - 当我们在它时，我们可以在同一时间：

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

Answer 16

在“成功”内创建您的fixedheader。在ajax调用中，标题和行中不会出现任何对齐问题。

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

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

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

Answer 17

希望这可以帮助那些仍在努力的人。

不要将桌子放在任何容器内。在表格渲染后，将表格的包装器作为容器。我知道这可能在你和桌子上有其他东西的地方无效，但是你可以随时追加那些内容。

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

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

（我添加了面板 - 默认设置）
而你的班级：

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

Answer 18

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

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

数据表强制宽度表

Answer 19

当桌子周围有一个div时，我遇到了类似的问题。

添加位置：相对固定它。

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

Answer 20

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

        

Answer 21

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

Answer 22

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

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

Answer 23

这是我这样做的方式..

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

Answer 24

我今天遇到同样的问题。

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

我的代码如下。

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

Answer 25

这很好用。

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