[解決済み] jQuery DataTables: テーブル幅の制御

質問

jQuery DataTables プラグインを使用して、テーブルの幅を制御するのに問題があります。 テーブルはコンテナの幅の100%になるはずですが、コンテナの幅よりもむしろ小さい、任意の幅になってしまいます。

提案に感謝します。

テーブルの宣言は次のようになります。

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

そして、javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

Firebug で HTML を検査すると、次のようになります (追加された style="width: 0px;" に注意してください)。

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

Firebugでスタイルを見てみると、table.displayのスタイルがオーバーライドされています。 これはどこから来ているのかわかりません

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

どのように解決するのですか？

この問題は、dataTable がその幅を計算する必要があるために発生します。しかし、タブ内で使用される場合、それは表示されないので、幅を計算することができません。解決策は、タブが表示されているときに 'fnAdjustColumnSizing' を呼び出すことです。

前文

この例では、スクロール機能付きデータテーブルを jQuery UI タブ (または、テーブルが初期化されたときに非表示 (display:none) になるその他の方法) と共に使用する方法を示しています。 テーブルが初期化されたときに隠された (display:none) 要素の中にある他の方法) と一緒に使用できることを示しています。その理由は これは、DataTablesが初期化されたときに、それがhidden要素にある場合、特別な配慮が必要だからです。 が初期化され、hidden要素にある場合、ブラウザはDataTablesに与える測定値を持たないからです。 ブラウザはDataTablesに与える計測値を持たないため、DataTablesが初期化される際に、列の位置がずれてしまうからです。 スクロールが有効な場合、列の位置がずれるからです。

これを回避する方法は、fnAdjustColumnSizing API 関数を呼び出すことです。この関数は、現在のデータに基づいて必要な列の幅を計算します。 この関数は、現在のデータに基づいて必要な列幅を計算し、その後、テーブルを再描画します。 これは、テーブルが初めて表示されるときに必要とされるものです。 この機能は、テーブルが初めて表示されるときに必要なものです。このために、jQuery UI のテーブルが提供する 'show' メソッドを使用しています。 データテーブルが作成されているかどうかを確認します（'div.data'の特別なセレクタに注意してください）。 div.dataTables_scrollBody'の追加セレクタに注目してください。 テーブルが初期化されたときに追加されます)。テーブルが初期化された場合は サイズを変更します。最適化として、テーブルの最初の表示だけサイズを変更することができます。 最適化すれば、テーブルの最初の表示だけサイズを変更することができます。

初期化コード

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

参照 この をご覧ください。