[英]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 上遇到了奇怪的行為:即采用最長的字段,將其划分為 lines ,並將其長度作為該列所有行的默認值。
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 init代碼:
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
。 嘗試改變這一點。
如果問題仍然存在,您還可以向.table
添加 CSS 規則。
當內容的寬度大於列的標題時,您也應該小心。
所以類似於 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:
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>
我建議不要為 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%"}
]
});
希望能幫助到你。
您可以定義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/
我在 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>
我嘗試了很多方法。 對我有用的唯一方法是:
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
} );
} );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.