4

我想知道是否有一种简单的方法可以让 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
4

3 回答 3

11

您可以将 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
});
于 2012-06-29T21:41:46.233 回答
2

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

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

然后您的 DataTables 添加选项：

var oTable = $("#tableName").dataTable({
    // Your other options here...
    "bAutoWidth":false
});
于 2013-07-18T14:04:47.707 回答
0

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

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

   $(window).bind('resize', function () {
      table.draw();
   });
});
于 2018-04-26T14:29:15.457 回答