数据表 - 设置列宽
Datatables - Setting column width
我正在尝试设置列的宽度,如下所示:
var per_page = $("table").data("per_page");
$(".table").dataTable({
"aoColumnDefs": [
{ "sWidth": "100px", "aTargets": [ 1 ] },
{ "sWidth": "100px", "aTargets": [ 2 ] },
{ "sWidth": "100px", "aTargets": [ 3 ] },
{ "sWidth": "100px", "aTargets": [ 4 ] },
{ "sWidth": "100px", "aTargets": [ 5 ] },
{ "sWidth": "100px", "aTargets": [ 6 ] },
{ "sWidth": "100px", "aTargets": [ 7 ] }
],
"aoColumns" : [
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
],
bJQueryUI: true,
iDisplayLength: per_page,
"fnDrawCallback": function( oSettings ) {
if (oSettings._iDisplayLength == per_page)
return true
else {
$.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
.done(function(data){
if (data.success)
per_page = oSettings._iDisplayLength;
});
}
}
})
但是生成的列宽不是我尝试设置的。 你能帮我吗?
更新 1
我已经更新了我的初始化代码,如下所示,但在IE 9上遇到了奇怪的行为:即采用最长的字段,将其划分为行,并将其长度作为此列所有行的默认长度。
var per_page = $("table").data("per_page");
$(".table").dataTable({
sScrollX: "100%",
aoColumns : [
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
],
bJQueryUI: true,
iDisplayLength: per_page,
"fnDrawCallback": function( oSettings ) {
if (oSettings._iDisplayLength == per_page)
return true
else {
$.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
.done(function(data){
if (data.success)
per_page = oSettings._iDisplayLength;
});
}
}
})
更新 2
我已经更新了如下所示的代码,即 9 中的结果是数据表的标题被调整为新大小,但表的其余部分没有受到更改的影响,请参见屏幕截图 http://gyazo.com/282967b051366b18634d4e778205c938初始化代码:
var per_page = $("table").data("per_page");
var datTable = $(".table").dataTable({
sScrollX: "100%",
sScrollX: "500px",
aoColumnDefs: [
{ bSortable: false, aTargets: [ 4, 5,6 ] },
{ sWidth: "16%", aTargets: [ 1, 2,3,4,5,6 ] },
],
bJQueryUI: true,
sAutoWidth: false,
iDisplayLength: per_page,
"fnDrawCallback": function( oSettings ) {
if (oSettings._iDisplayLength == per_page)
return true
else {
$.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
.done(function(data){
if (data.success)
per_page = oSettings._iDisplayLength;
});
}
}
})
如何修复此行为?
我在您的更新 2 中看到您使用了sAutoWidth
,但我认为您输入错误bAutoWidth
.尝试改变这一点。
您还可以添加 CSS 规则以.table
问题是否仍然存在。
当内容的宽度大于列的标题时,您也应该小心。
所以类似于 1 和 2 的组合:
$('.table').dataTable({
bAutoWidth: false,
aoColumns : [
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '10%' }
]
});
你应该使用 数据表的"bAutoWidth
"属性,并以%为单位给出每个td/列的宽度
$(".table").dataTable({"bAutoWidth": false ,
aoColumns : [
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "10%"},
]
});
希望这会有所帮助。
我的方式
$('#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' }
]
});
这是我让它工作的唯一方法:
.JS:
"bAutoWidth": false,
columnDefs: [
{ "width": "100px", "targets": [0] }
]
.CSS:
#yourTable {
table-layout: fixed !important;
word-wrap: break-word;
}
CSS部分不一定是干净的,但它可以完成工作。
我可以告诉你另一种简单的方法来修复html本身中数据表的宽度。
用
<colgroup>
<col width="3%">
<col width="3%">
</colgroup>
下面是数据表的示例代码:
<table class="table datatable">
<colgroup>
<col width="33%">
<col width="33%">
<col width="33%">
<col width="33%">
</colgroup>
<thead>
<tr>
<th>User Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tr>
<th>alpha</th>
<th>beta</th>
<th>gama</th>
<th>delta</th>
</tr>
<tr>
<th>alpha</th>
<th>beta</th>
<th>gama</th>
<th>delta</th>
</tr>
<tr>
<th>alpha</th>
<th>beta</th>
<th>gama</th>
<th>delta</th>
</tr>
</table>
我在 HTML 标记中设置列宽如下:
<thead>
<tr>
<th style='width: 5%;'>ProjectId</th>
<th style='width: 15%;'>Title</th>
<th style='width: 40%;'>Abstract</th>
<th style='width: 20%;'>Keywords</th>
<th style='width: 10%;'>PaperName</th>
<th style='width: 10%;'>PaperURL</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr id="@item.ID">
<td>@item.ProjectId</td>
<td>@item.Title</td>
<td>@item.Abstract</td>
<td>@item.Keywords</td>
<td>@item.PaperName</td>
<td>@item.PaperURL</td>
</tr>
}
</tbody>
</table>
您可以定义sScrollX : "100%"
来强制 dataTables 保持列宽:
..
sScrollX: "100%", //<-- here
aoColumns : [
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
],
...
你可以玩这个小提琴-> http://jsfiddle.net/vuAEx/
我建议不要对sWidth使用像素,而是使用百分比。如下所示:
"aoColumnDefs": [
{ "sWidth": "20%", "aTargets": [ 0 ] }, <- start from zero
{ "sWidth": "5%", "aTargets": [ 1 ] },
{ "sWidth": "10%", "aTargets": [ 2 ] },
{ "sWidth": "5%", "aTargets": [ 3 ] },
{ "sWidth": "40%", "aTargets": [ 4 ] },
{ "sWidth": "5%", "aTargets": [ 5 ] },
{ "sWidth": "15%", "aTargets": [ 6 ] }
],
aoColumns : [
{ "sWidth": "20%"},
{ "sWidth": "5%"},
{ "sWidth": "10%"},
{ "sWidth": "5%"},
{ "sWidth": "40%"},
{ "sWidth": "5%"},
{ "sWidth": "15%"}
]
});
希望对您有所帮助。
我已经尝试了很多方法。对我有用的唯一方法是:
Yush0 CSS解决方案:
#yourTable{
table-layout: fixed !important;
word-wrap:break-word;
}
与 Roy Jackson HTML 解决方案一起:
<th style='width: 5%;'>ProjectId</th>
<th style='width: 15%;'>Title</th>
<th style='width: 40%;'>Abstract</th>
<th style='width: 20%;'>Keywords</th>
<th style='width: 10%;'>PaperName</th>
<th style='width: 10%;'>PaperURL</th>
</tr>
适用于仍然有 1.9.4 问题的人改变
//oSettings.aoColumns[i].nTh.style.width = _fnStringToCss(oSettings.aoColumns[i].sWidth);
oSettings.aoColumns[i].nTh.style.minWidth = _fnStringToCss(oSettings.aoColumns[i].sWidth);
如果您需要仅使用 CSS 设置数据表列的宽度,以下 css 将为您提供帮助:-)
.HTML
<table class="table table-striped table-bordered table-hover table-checkable" id="datatable">
<thead>
<tr role="row" class="heading">
<th width="2%">
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="group-checkable" data-set="#sample_2 .checkboxes" />
<span></span>
</label>
</th>
<th width=""> Col 1 </th>
<th width=""> Col 2 </th>
<th width=""> Col 3 </th>
<th width=""> Actions </th>
</tr>
<tr role="row" class="filter">
<td> </td>
<td><input type="text" class="form-control form-filter input-sm" name="col_1"></td>
<td><input type="text" class="form-control form-filter input-sm" name="col_2"></td>
<td><input type="text" class="form-control form-filter input-sm" name="col_3"></td>
<td>
<div class="margin-bottom-5">
<button class="btn btn-sm btn-success filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
</div>
<button class="btn btn-sm btn-default filter-cancel"><i class="fa fa-times"></i> Reset</button>
</td>
</tr>
</thead>
<tbody> </tbody>
</table>
使用metronic管理主题,我的表ID如上所述 #datatable。
.CSS
#datatable > thead > tr.heading > th:nth-child(2),
#datatable > thead > tr.heading > th:nth-child(3) { width: 120px; min-width: 120px; }
$(document).ready(function() {
$("#ratesandcharges1").dataTable({
columnDefs: [
{ width: 200, targets: 0 }
],
fixedColumns: true
} );
} );
https://datatables.net/reference/option/columns.width
- 具有rowGrouping的数据表无法隐藏列
- 数据表-隐藏/显示列
- 数据表1.10,第列.转发器使用情况
- 数据表通过分析一列的值对其进行排序
- 如何设置'targets'在列中动态定义数据表
- 多个数据表切换列
- 如何对数据表中的容量列进行排序
- 如何刷新数据表列数据
- 数据表 + 列搜索 + 整体搜索协同工作 + 服务器端处理
- jQuery 数据表 在页面上导航时,在分页表上重置行的数据
- 在 CSS 中设置表列宽(如有必要,使用 JavaScript)
- 将索引列添加到数据表
- JQuery - 根据数组数据将 html 表列添加到表的末尾
- 数据表列宽度
- jquery数据表显示/隐藏列添加了错误的选择
- 将计算的列值绑定到数据表数据模型
- 数据表 - 设置列宽
- 数据表 YADCF 重置所有列时出错(exResetAllFilters)
- 重置多列过滤数据表
- 如何使列成为数据表中的链接.js