web-dev-qa-db-ja.com

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%;  
}
jquerydatatablesjquery-datatables
93
John Mac

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

プリアンブル

この例は、スクロール付きのDataTablesをjQuery UIタブ（または実際に、初期化時にテーブルが非表示（display：none）要素にある他のメソッド）とともに使用する方法を示しています。これには特別な考慮が必要な理由は、DataTablesが初期化され、非表示要素にある場合、ブラウザーにはDataTablesを提供するための測定値がないため、スクロールが有効になっているときに列の位置合わせが必要になるためです。

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

初期化コード

$(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 ] }
        ]
    } );
} );

詳細については、 this を参照してください。

59
Arik Kfir

DataTablesを初期化するときに、bAutoWidthとaoColumns.sWidthの2つの変数を微調整する必要があります。

幅が50px、100、120px、および30pxの4つの列があると仮定すると、次のようになります。

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    });

DataTablesの初期化の詳細については、 http://datatables.net/usage をご覧ください。

この設定のwidhtsと適用するCSSの相互作用に注意してください。これを試す前に、既存のCSSをコメントして、どれだけ接近するかを確認することができます。

53
artlung
jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});
49
Suraj

まあ、私はそのプラグインに精通していませんが、データテーブルを追加した後にスタイルをリセットできますか？何かのようなもの

$("#querydatatablesets").css("width","100%")

.dataTable呼び出しの後？

47
SingleNegationElimination

データテーブルの列幅に関して多くの問題がありました。私にとっての魔法の修正は、行を含めていました

table-layout: fixed;

このcssは、テーブルのcss全体に適用されます。たとえば、次のようなデータテーブルを宣言した場合：

LoadTable = $('#LoadTable').dataTable.....

次に、魔法のCSS行はクラスLoadtableに入ります

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

11
user1842675

これはjQdataTableのバグの結果であるため、TokenMacGuysソリューションが最適に機能します。起こるのは、$（ '＃sometabe'）。dataTable（）。fnDestroy（）を使用すると、テーブルの幅が100％ではなく100pxに設定されることです。ここに簡単な修正があります：

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });
7
Peter Drinnan

各列にsWidthを使用して明示的に幅を設定し、dataTable初期化でbAutoWidth: falseを使用すると、（同様の）問題が解決しました。あふれるスタックが大好きです。

5
tubelight

固定フィールドなしで少なくとも1つのフィールドを残す必要があります。次に例を示します。

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

すべてを変更できますが、1つだけをnullのままにしておくと、ストレッチできます。 ALLに幅を付けると機能しません。今日私が誰かを助けたことを願っています！

5
cure85

このcssクラスをページに追加すると、問題が修正されます。

#<your_table_id> {
    width: inherit !important;
}
5
Bahadir Tasdemir
"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

これはテーブル全体の幅を調整するのにうまくいきました。ありがとう、ピーター・ドリンナン！

4
Nilani Algiriyage

Datatable 10.1と同様、これは簡単です。 HTMLで表に幅属性を設定するだけです。つまり、width = "100％"の場合、DTによって設定されたすべてのCSSスタイルがオーバーライドされます。

こちらをご覧ください http://www.datatables.net/examples/basic_init/flexible_width.html

4
Udit

ここでの解決策はどれも役に立たなかった。 datatables homepage の例でも動作しなかったため、showオプションでのdatatableの初期化が行われました。

問題の解決策を見つけました。トリックは、タブにアクティブ化オプションを使用することと、表示されるテーブルでfnAdjustColumnSizing（）を呼び出すことです：

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});
3
Helmut Steiner

準備完了イベントでこれを実行していますか？

 $（document）.ready（function（）{...}）;

サイズ設定は、ほとんどの場合、完全にロードされるドキュメントに依存します。

2
Mufaka

Ajaxなしで通常のテーブルにJQueryを適用しただけですが、私はあなたとまったく同じ問題を抱えていたと言ってください。何らかの理由で、Firefoxは公開後もテーブルを展開しません。テーブルをDIV内に配置し、代わりにDIVにエフェクトを適用することで問題を修正しました。

2
Dave

この問題に関する別の便利なリンクを見つけて、問題を解決しました。

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

データテーブルは幅テーブルを強制します

1
Chuanzhou Tang

これがまだ苦労している人を助けることを願っています。

テーブルをコンテナ内に入れないでください。テーブルのレンダリング後、テーブルのラッパーをコンテナにします。これはテーブルと一緒に何か他のものがある場所では無効かもしれませんが、そのコンテンツをいつでも追加して戻すことができます。

私にとって、この問題は、サイドバーと、実際にそのサイドバーのオフセットであるコンテナーがある場合に発生します。

$(YourTableName+'_wrapper').addClass('mycontainer');

（パネルpanel-defaultを追加しました）
そしてあなたのクラス：

.mycontainer{background-color:white;padding:5px;}
1
A4Abhiraj

固定ヘッダープラグインを使用してテーブル/セルの幅を調整できない場合：

データテーブルは、列幅のパラメーターをtheadタグに依存しています。これは、テーブルの内部htmlのほとんどが自動生成されるため、実際には唯一のネイティブhtmlであるためです。

ただし、発生するのは、セルの一部がtheadセル内に格納されている幅より大きくなる可能性があることです。

つまりテーブルに多くの列（幅の広いテーブル）があり、行に多くのデータがある場合、 "sWidth"の呼び出し：子行がオーバーフローコンテンツに基づいてtdのサイズを自動的に変更するため、tdセルサイズを変更できません。これは、テーブルが初期化され、その初期化パラメータが渡された後、afterが発生します。

元のthead "sWidth"：パラメータは、テーブルがデフォルトの幅％100をまだ持っているとデータテーブルが判断するため、オーバーライド（縮小）されます。一部のセルがオーバーフローしたことを認識しません。

これを修正するために、オーバーフロー幅を把握し、それに応じてテーブルのサイズを変更して説明しましたafterテーブルが初期化された後固定ヘッダーを同時に初期化できます。

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});
1
DrewT

ajax呼び出しの「成功」内にfixedheaderを作成すると、ヘッダーと行に配置の問題はありません。

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}
1
Chandra Sekhar beluduru

テーブルの内容がテーブルのヘッダーとフッターよりも大きいという同様の問題がありました。テーブルの周りにdivを追加し、x-overflowを設定すると、この問題がソートされたようです：

0
Nick Holden

今日も同じ問題に出会う。

私はそれを解決するためにトリッキーな方法を使用しました。

以下の私のコード。

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});
0
Kenneth Wong

私は同様の問題を抱えていましたが、列のテキストが壊れないことがわかり、このCSSコードを使用して問題を解決しました

th,td{
max-width:120px !important;
Word-wrap: break-Word
}
0
h0mayun

BAutoWidthとaoColumnsの前に他のすべてのパラメーターが正しく入力されていることを確認してください。前に間違ったパラメーターがあると、この機能が壊れます。

0
DejanR

これが私のやり方です。

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});
0
Kevin Khew

Divをテーブルに巻き付けると、同様の問題が発生しました。

位置の追加：相対的な固定化。


#report_container {
 float: right;
 position: relative;
 width: 100%;
}
0
mardala