我正在尝试设置列的宽度,如下所示:
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上遇到了奇怪的行为: IE将最长的字段分成几行,并将其长度作为该列所有行的默认值。
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
我已经按照以下代码进行了更新,在ie 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;
});
}
}
})
我该如何修复这个行为?