jquery - 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，您会看到这一点（注意添加的 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%;  
}

score 61 · Accepted Answer

61

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

于 2009-10-09T16:52:48.167 回答

score 61 · Accepted Answer

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

前言

这个例子展示了如何将带有滚动功能的 DataTables 与 jQuery UI 选项卡一起使用（或者实际上任何其他在初始化时表格位于隐藏 (display:none) 元素中的方法）。这需要特别考虑的原因是，当初始化 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 ] }
        ]
    } );
} );

有关更多信息，请参阅此内容。

score 54 · Accepted Answer

初始化 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

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

score 48 · Accepted Answer

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

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

在 .dataTable 调用之后？

score 12 · Accepted Answer

我对数据表的列宽有很多问题。对我来说，神奇的修复是包括这条线

table-layout: fixed;

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

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

然后神奇的 css 行将进入类 Loadtable

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

}

score 7 · Accepted Answer

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

    });

score 6 · Accepted Answer

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

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

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

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

score 6 · Accepted Answer

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

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

score 5 · Accepted Answer

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

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

这里没有一个解决方案对我有用。甚至数据表主页上的示例也无法正常工作，因此在 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);

});

score 2 · Accepted Answer

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

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

大小很可能取决于文件是否已满载。

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

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

原始的 thead "sWidth": 参数被覆盖（缩小），因为 datatables 认为您的表格仍然具有 %100 的默认宽度——它无法识别某些单元格溢出。

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

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

score 1 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

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

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

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

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

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

score 1 · Accepted Answer

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

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

Datatables力宽表

score 0 · Accepted Answer

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

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


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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

这是我的做法。。

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

score 0 · Accepted Answer

我今天遇到同样的问题。

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

我的代码如下。

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

score -1 · Accepted Answer

-1

这工作正常。

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

于 2013-02-27T14:07:17.967 回答

jquery - jQuery DataTables：控制表格宽度

26 回答 26

Related

Reference