jQuery DataTables：控制表格宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/604933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DataTables: control table width
提问by John Mac
I have a problem controlling the width of a table using the jQuery DataTables plugin. The table is supposed to be 100% of the container width, but ends up being an arbitrary width, rather less than the container width.
我在使用 jQuery DataTables 插件控制表格宽度时遇到问题。该表应该是容器宽度的 100%，但最终是任意宽度，而不是小于容器宽度。
Suggestions appreciated
建议赞赏
The table declaration looks like this
表声明如下所示
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%">
And the javascript
和 javascript
jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){
jQuery('#querytableDatasets').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false
});
}); `
Inspecting the HTML in Firebug, you see this (note the added style="width: 0px;")
在 Firebug 中检查 HTML，你会看到这个（注意添加的 style="width: 0px;"）
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%" style="width: 0px;">
Looking in Firebug at the styles, the table.display style has been overridden. Can't see where this is coming from
在 Firebug 中查看样式，table.display 样式已被覆盖。看不到这是从哪里来的
element.style {
width:0;}
-- dataTables.css (line 84
table.display {
margin:0 auto;
width:100%;
}
采纳答案by Arik Kfir
The issue is caused because dataTable must calculate its width - but when used inside a tab, it's not visible, hence can't calculate the widths. The solution is to call 'fnAdjustColumnSizing' when the tab shows.
这个问题是因为 dataTable 必须计算它的宽度 - 但是当在选项卡内使用时，它不可见，因此无法计算宽度。解决方案是在选项卡显示时调用“fnAdjustColumnSizing”。
Preamble
前言
This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed any other method whereby the table is in a hidden (display:none) element when it is initialised). The reason this requires special consideration, is that when DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements with which to give DataTables, and this will require in the misalignment of columns when scrolling is enabled.
The method to get around this is to call the fnAdjustColumnSizing API function. This function will calculate the column widths that are needed based on the current data and then redraw the table - which is exactly what is needed when the table becomes visible for the first time. For this we use the 'show' method provided by jQuery UI tables. We check to see if the DataTable has been created or not (note the extra selector for 'div.dataTables_scrollBody', this is added when the DataTable is initialised). If the table has been initialised, we re-size it. An optimisation could be added to re-size only of the first showing of the table.
这个例子展示了如何将带滚动的 DataTables 与 jQuery UI 选项卡一起使用（或者实际上是任何其他方法，其中表在初始化时处于隐藏 (display:none) 元素中）。这需要特别考虑的原因是，当 DataTables 被初始化并且它在一个隐藏元素中时，浏览器没有任何度量来提供 DataTables，这将需要在启用滚动时列的未对齐。
解决此问题的方法是调用 fnAdjustColumnSizing API 函数。此函数将根据当前数据计算所需的列宽，然后重新绘制表格 - 这正是表格第一次可见时所需要的。为此，我们使用 jQuery UI 表提供的“show”方法。我们检查是否已创建 DataTable（注意“div.dataTables_scrollBody”的额外选择器，这是在初始化 DataTable 时添加的）。如果表已经初始化，我们重新调整它的大小。可以添加优化以仅重新调整表格的第一次显示的大小。
Initialisation code
初始化代码
$(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 ] }
]
} );
} );
See thisfor more info.
有关更多信息，请参阅此内容。
回答by artlung
You'll want to tweak two variables when you initialize dataTables: bAutoWidthand aoColumns.sWidth
初始化 dataTables 时，您需要调整两个变量：bAutoWidth和aoColumns.sWidth
Assuming you have 4 columns with widths of 50px, 100, 120px and 30px you would do:
假设您有 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' }
]
});
More information on the initialization of dataTables can be found at http://datatables.net/usage
有关数据表初始化的更多信息，请访问http://datatables.net/usage
Watch for interaction between this setting of widhts and the CSS you are applying. You might comment your existing CSS before trying this to see how close you get.
注意此宽度设置与您正在应用的 CSS 之间的交互。您可以在尝试之前评论您现有的 CSS，以查看您获得的接近程度。
回答by Suraj
jQuery('#querytableDatasets').dataTable({
"bAutoWidth": false
});
回答by SingleNegationElimination
Well, I'm not familiar with that plugin, but could you reset the style after adding the datatable? Something like
好吧，我对那个插件不熟悉，但是您可以在添加数据表后重置样式吗？就像是
$("#querydatatablesets").css("width","100%")
after the .dataTable call?
在 .dataTable 调用之后？
回答by user1842675
I have had numerous issues with the column widths of datatables. The magic fix for me was including the line
我在数据表的列宽方面遇到了很多问题。对我来说神奇的修复包括这条线
table-layout: fixed;
this css goes with the overall css of the table. For example, if you have declared the datatables like the following:
这个 css 与表格的整体 css 一致。例如，如果您已经声明了如下所示的数据表：
LoadTable = $('#LoadTable').dataTable.....
then the magic css line would go in the class Loadtable
那么神奇的 css 行将进入类 Loadtable
#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;
}
}
回答by Peter Drinnan
TokenMacGuys solution works best becasue this is the result of a bug in jQdataTable. What happens is if you use $('#sometabe').dataTable().fnDestroy() the table width gets set to 100px instead of 100%. Here is a quick fix:
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%");
}
});
回答by cure85
You have to leave at least one field without fixed field, for example:
你必须至少留下一个没有固定字段的字段，例如：
$('.data-table').dataTable ({
"bAutoWidth": false,
"aoColumns" : [
null,
null,
null,
null,
{"sWidth": "20px"},
{ "sWidth": "20px"}]
});
You can change all, but leave only one as null, so it can stretch. If you put widths on ALL it will not work. Hope I helped somebody today!
您可以更改所有内容，但只保留一个为空，这样它就可以拉伸。如果您将宽度放在 ALL 上，它将不起作用。希望我今天帮助了某人！
回答by tubelight
Setting widths explicitly using sWidthfor each column AND bAutoWidth: falsein dataTableinitialization solved my (similar) problem. Love the overflowing stack.
在初始化中sWidth为每列显式设置宽度AND解决了我的（类似）问题。喜欢溢出的堆栈。bAutoWidth: falsedataTable
回答by Bahadir Tasdemir
Add this css class to your page, it will fix the issue:
将此 css 类添加到您的页面，它将解决问题：
#<your_table_id> {
width: inherit !important;
}
回答by Udit
As on Datatable 10.1, this is straight forward. Just put width attribute to your table in HTML. i.e. width="100%", this will override all CSS styles set by DT.
与 Datatable 10.1 一样，这很简单。只需将宽度属性放在 HTML 中的表格中。即 width="100%"，这将覆盖 DT 设置的所有 CSS 样式。
See this http://www.datatables.net/examples/basic_init/flexible_width.html
看到这个http://www.datatables.net/examples/basic_init/flexible_width.html
