如何根据浏览器缩放自动调整数据表

Question

我想知道如果有一个简单的方法,让一个jQuery的数据表,而用户使用浏览器的放大,缩小功能重新大小本身.目前,当我放大和缩小数据表时,数据会缩小或增长到表格的大小.我还注意到,在我缩小或在我可以刷新页面之后,数据表会自行调整其外观.任何洞察或可能的重定向到一个问题已被回答(找不到一个)将不胜感激.谢谢.

这是我的JavaScript表属性:

    "bJQueryUI": true,
    "bStateSave": true,
    "iDisplayLength": 50,
    "aaSorting": [[4, "desc"], [5, "asc"]],
    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "sPaginationType": "full_numbers",
    "sScrollY": "35em",
    "sScrollX": "100%",
    "bScrollCollapse": true

Answer 1

您可以将datables重绘事件绑定到窗口重新调整大小函数:

$(window).resize(function() {
    oTable.fnDraw(false)        
});

这假设你使用变量oTable初始化你的表,如下所示:

var oTable = $("#tableName").dataTable({
"bJQueryUI": true,
"bStateSave": true,
"iDisplayLength": 50,
"aaSorting": [[4, "desc"], [5, "asc"]],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"sScrollY": "35em",
"sScrollX": "100%",
"bScrollCollapse": true
});