web-dev-qa-db-ja.com

データテーブルのオンザフライのサイズ変更

素晴らしいDataTables jQueryプラグインを使用しています。 http://datatables.net/ FixedColumnsおよびKeyTableエクストラが追加されました。

現在、ウィンドウのサイズが変更されると、テーブルのサイズがきれいに変更されます。ただし、テーブルのdivはjQueryアニメーションによって幅を変更することもできます。テーブルのサイズを変更する方法は見つかりませんでした。元の幅で停滞したままです。ページロードの前にコードのdiv幅を変更した場合にのみ、テーブルのサイズが正しく変更されます。

ウィンドウの幅とdivの幅の両方に応じてDataTableのサイズをオンザフライで変更するにはどうすればよいですか？前もって感謝します！ :-)

javascriptjquerydatatables
53
Emphram Stavanger

何が起こっているのかは、DataTablesが計算値に初期化されるときにテーブルのCSS幅を設定していることです-その値はピクセル単位であるため、ドラッグしてもサイズが変更されません。これを行う理由は、ページネーションを変更するときにテーブルと列（列の幅も設定されている）の幅がジャンプするのを止めるためです。

DataTablesでこの動作を停止するためにできることは、 autoWidth パラメーターをfalseに設定することです。

$('#example').dataTable( {
  "autoWidth": false
} );

これにより、DataTablesが計算された幅をテーブルに追加するのを停止し、（おそらく）幅：100％のままにして、サイズを変更できるようにします。列に相対的な幅を追加すると、列のバウンドを停止するのにも役立ちます。

DataTablesに組み込まれているもう1つのオプションは、sScrollXオプションを設定してスクロールを有効にすることです。DataTablesはテーブルをスクロールコンテナーの100％幅に設定するためです。しかし、スクロールしたくないかもしれません。

完全な解決策は、テーブルのCSS幅を取得できる場合です（1つが適用されていると仮定すると、つまり100％）が、スタイルシートを解析せずに、それを行う方法がわかりません（つまり、基本的に$（）が必要です） .css（ 'width'）は、ピクセル計算値ではなく、スタイルシートから値を返します）。

116
Allan Jardine

私はこれが古いことを知っていますが、これで解決しました：

  var update_size = function() {
    $(oTable).css({ width: $(oTable).parent().width() });
    oTable.fnAdjustColumnSizing();  
  }

  $(window).resize(function() {
    clearTimeout(window.refresh_size);
    window.refresh_size = setTimeout(function() { update_size(); }, 250);
  });

注：この回答はDataTables 1.9に適用されます

40
Stephen

これは私のためにトリックをしました。

$('#dataTable').resize()
18
jps
$(document).ready(function() {
    $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
        // var target = $(e.target).attr("href"); // activated tab
        // alert (target);
        $($.fn.dataTable.tables( true ) ).css('width', '100%');
        $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
    } ); 
});

私にとっては、"autoWidth": false,

11
Rui Martins

これを試してみてください。

var table = $('#example').DataTable();
table.columns.adjust().draw();

リンク： データテーブルの列調整

8
Chintan Panchal

つかいます "bAutoWidth": falseそして、以下の例をご覧ください。それは私のために働いています。

例：

$('#tableId').dataTable({
 "bAutoWidth": false
});
7
user2314493

他の回答のように遅れることもありますが、今年初めにこれを行いました。私が思いついた解決策はCSSを使用しています。

    $(window).bind('resize', function () {
        /*the line below was causing the page to keep loading.
        $('#tableData').dataTable().fnAdjustColumnSizing();
        Below is a workaround. The above should automatically work.*/
        $('#tableData').css('width', '100%');
    } );
2
mezzie

私も同じ挑戦をしました。 Webアプリの左側にあるメニューを折りたたんだときに、データテーブルのサイズが変更されませんでした。 「autoWidth」の追加：誤った初期化初期化が機能しました。

$('#dataTable').DataTable({'autoWidth':false, ...});
1
Emmanuel Robert Ssebaggala

私はこれを次のように動作させました：

最初に、dataTableの定義で、aoColumns配列に、固定ピクセルまたはemではない％として表されるsWidthデータが含まれていることを確認してください。次に、bAutoWidthプロパティをfalseに設定していることを確認します。次に、この小さなJSを追加します。

update_table_size = function(a_datatable) {
  if (a_datatable == null) return;
  var dtb;
  if (typeof a_datatable === 'string') dtb = $(a_datatable)
  else dtb = a_datatable;
  if (dtb == null) return;

  dtb.css('width', dtb.parent().width());
  dtb.fnAdjustColumSizing();
}

$(window).resize(function() {
  setTimeout(function(){update_table_size(some_table_selector_or_table_ref)}, 250);
});

うまく機能し、私のテーブルセルはwhite-space: wrap; CSSを処理します（sWidthを設定しないと機能しなかったため、この質問に至りました）。

1
Dave Sag

OPとまったく同じ問題を抱えていました。 jQueryアニメーション（toogle（ "fast"））がコンテナのサイズを変更した後、幅を再調整しないDataTableがありました。

これらの答えと多くの試行錯誤を読んだ後、これは私にとってトリックでした：

  $("#animatedElement").toggle(100, function() {    
    $("#dataTableId").resize();
  });

多くのテストの後、dataTablesが正しい幅を計算するためにアニメーションが終了するのを待つ必要があることに気付きました。

1
Alberto Hormazabal

Div resizeイベントをキャプチャして、データテーブルで.fnDraw()を実行しようとしましたか？ fnDrawはテーブルのサイズを変更する必要があります

1
Keith.Abramo

以下のコードは、Chintan Panchalの回答とAntoine Leclairのコメント（windows resizeイベントにコードを配置する）の組み合わせです。 （Antoine Leclairが言及したデバウンスは必要ありませんでしたが、ベストプラクティスになる可能性があります。）

  $(window).resize( function() {
      $("#example").DataTable().columns.adjust().draw();
  });

これが私の場合に有効なアプローチでした。

1
StackOverflowUser