这是我的数据表。
我似乎无法控制任何列的宽度:
$(document).ready(function() {
$('#example').DataTable( {
"ajax": 'ajax/data/arrays.txt'
} );
我在这里尝试了各种方法:
$('#example').dataTable( {
"autoWidth": false
} );
在这里:
$('#example').dataTable( {
"columnDefs": [
{ "width": "20%", "targets": 0 }
]
} );
没有成功。谁能告诉我如何手动控制某些单独列的宽度?我希望可以使用数据表中的现有方法完成。
注意:如果有机会,我会发布一个小提琴。在这里摆弄 - 它不完全相同,但是如果我的理解是正确的,我应该在这里控制列宽:
var table = $('#example').DataTable();
我的经验是,columns.width
主要适用于相对意图,即"我希望此列相对较大"。每个列宽都会造成很多影响,即使您仔细地以加起来为 100 的确切百分比定位每列,您最终也会感到沮丧。
如果你想要精确、精确的列宽定义,就没有办法绕过硬编码的 CSS:
table.dataTable th:nth-child(1) {
width: 20px;
max-width: 20px;
word-break: break-all;
white-space: pre-line;
}
table.dataTable td:nth-child(1) {
width: 20px;
max-width: 20px;
word-break: break-all;
white-space: pre-line;
}
http://jsfiddle.net/6eLg0n9z/
类似
#table-foo td:nth-child(3),
#table-foo td:nth-child(4) {
width: 5%;
max-width: 5%;
}
为我工作,您按逗号分隔的规则指定列
如果你有一个这样的表,你使用 jquery datatable
来定位,
<table class="table" cellSpacing="0" width="100%"
id="families-table">
<thead>
<tr>
<th>Name</th>
<th >Category</th>
<th><abbr title="Description">Des</abbr></th>
</tr>
</thead>
</table>
要控制列的宽度,您可以添加此
<table class="table" cellSpacing="0" width="100%"
id="families-table">
<thead>
<tr>
<th **style="width: 250px;"**>Name</th>
<th >Category</th>
<th><abbr title="Description">Des</abbr></th>
</tr>
</thead>
</table>
将inline style
添加到列将完美运行。如果您在 dev tools
中注意到,您将看到datatable
内联分配width
,因此您使用 CSS 文件应用任何内容,它将被覆盖。向列添加inline CSS
对我来说效果很好。希望这有帮助。
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').removeAttr('width').DataTable({
scrollY: "400px",
scrollX: true,
scrollCollapse: true,
paging: false,
columnDefs: [
{ width: 300, targets: 0 },
{ width: 100, targets: 0 },
{ width:100, targets: 0 }
],
fixedColumns: false});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
您可以参考相同的 http://jsfiddle.net/7bh7w2tu/10
由于我的表中有 5 列,我可以像这样定义每个列宽。
$('#example').DataTable({
"autoWidth": false,
"columnDefs": [
{ "width": "10%", "targets": 0 },
{ "width": "10%", "targets": 1 },
{ "width": "50%", "targets": 2 },
{ "width": "10%", "targets": 3 },
{ "width": "20%", "targets": 4 },
]
});
将"自动宽度"保留为 false :此选项禁用自动列宽计算并使用 columnDefs 选项手动设置宽度。