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

データブルの再描画イベントをウィンドウのサイズ変更関数に結び付けることができます。

$(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

問題のテーブルを設定して、DataTablesstyle="width:100%;"のオプションを使用することもできます。"bAutoWidth":falseその後、幅が維持され、実際に再描画する必要はありません。特に、サーバー側で複雑なテーブルを処理するテーブルの場合、これはかなり軽量です。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 に答える