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

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

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

这假设您使用Table的变量初始化表，如下所示：

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
});

Answer 2

您还可以将相关表格设置为style="width:100%;"，然后对DataTables使用"bAutoWidth":false选项。然后它保持你的宽度，你实际上不需要重绘。特别是对于执行复杂服务器端处理表的表，这要轻得多。对于HTML只需更改样式

<table id="tableName" style="width:100%;">...</table>

然后您的DataTables添加选项：

var oTable = $("#tableName").dataTable({
    // Your other options here...
    "bAutoWidth":false
});

Answer 3

当窗口调整大小时，您需要重新绘制表格：

$(document).ready(function() {
   //Load datatable here

   $(window).bind('resize', function () {
      table.draw();
   });
});

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

以下是我的JavaScript表格属性：

3 个答案: