包装器宽度上的jQuery dataTables更改仅在加载chrome的检查器后生效

时间:2013-12-02 13:51:17

标签: javascript jquery datatables jquery-datatables

我正在尝试使用dataTables调整表的大小,但我花了好几个小时尝试这样做,这是不可能的。如果我使用普通的CSS设置宽度它工作正常,但我的目的是动态设置宽度,使其适合页面的宽度:

我有以下代码:

var winH = screen.availHeight;     
winH = winH - (winH/2) - 50;
winH = winH + "px";

winW = screen.availWidth;
winW = winW - 100;
winW = winW + "px";

var oTable = $('#tutorial-table').dataTable({
    "bFilter": false,
    "bSort": false,
    "bPaginate": false,
    "bScrollCollapse": true,   
    "bInfo": true,
    "sScrollY": winH,
    "bAutoWidth": false,
    "sScrollX": "100%"
});
new FixedColumns( oTable, {
    "iLeftColumns": 1,
    "iLeftWidth": 130,
});        

$('#tutorial-table_wrapper').css('width', winW);
oTable.fnDraw();

上面的代码缩小了表格,只显示了1列,但是如果我添加了一些CSS:

#tutorial-table_wrapper{
    width: 1200px;
}

它工作正常,并将表调整为1200px(通过JS设置只有在我打开检查器时才有效,我认为这是由于chrome重新加载了所有元素)。

有没有办法强制这种行为或以某种方式设置宽度?

由于

1 个答案:

答案 0 :(得分:0)

我最后通过完全删除dataTables并使用jquery固定表来修复它:

http://www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx

在加载动态表或配置宽度等参数时,设置起来容易得多,非常轻便,响应速度也快。

问候。