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」を呼び出すことです。

前文

この例は、スクロール機能を備えた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 ] }
        ]
    } );
} );

詳しくはこちらをご覧ください。

あなたはDataTableのを初期化するときに、2つの変数を微調整したいと思う：bAutoWidthとaoColumns.sWidth

幅が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にコメントして、どれだけ近づいているかを確認することができます。

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

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

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

.dataTable呼び出しの後？

データテーブルの列幅に多くの問題がありました。私のための魔法の修正はラインを含んでいました

table-layout: fixed;

このcssは、テーブルの全体的なcssと一致します。たとえば、次のようにデータテーブルを宣言したとします。

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

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

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

}

これは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%");
        }

    });

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

#<your_table_id> {
    width: inherit !important;
}

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

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

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

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

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

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

これはテーブル全体の幅を調整するのにうまくいきました。@Peter Drinnanに感謝！

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

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

ここでの解決策はどれも私にとってうまくいきませんでした。データテーブルのホームページの例でもしなかったため、showオプションでデータテーブルを初期化できませんでした。

私は問題の解決策を見つけました。トリックは、タブのアクティブ化オプションを使用して、表示されているテーブルで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);

});

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

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

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

サイズ設定は、ドキュメントが完全に読み込まれていることに依存している可能性が高いです。

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

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

ただし、セルの一部がtheadセル内に格納されている幅よりも大きくなる場合があります。

つまり、テーブルに多くの列（ワイドテーブル）があり、行に多くのデータがある場合、「sWidth」を呼び出します。子行はオーバーフローに基づいて自動的にtdのサイズを変更するため、tdセルサイズを変更することは適切に機能しません。コンテンツとこれは後に発生します、テーブルが初期化され、そのinit paramsを渡したにします。

オリジナルのthead "sWidth"：データテーブルはテーブルのデフォルトの幅が％100であるとデータテーブルが考えているため、パラメーターが上書き（縮小）されます-一部のセルがオーバーフローしていることが認識されません。

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

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

ajax呼び出しの「成功」内に固定ヘッダーを作成します。ヘッダーと行の位置合わせの問題は発生しません。

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

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

        new $.fn.dataTable.FixedHeader(table);
}        

これがまだ苦労している人に役立つことを願っています。

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

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

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

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

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

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

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

データテーブルの力幅表

テーブルにdivをラップすると、同様の問題が発生しました。

位置の追加：相対的に修正されました。

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

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

bAutoWidthおよびaoColumnsの前にある他のすべてのパラメーターが正しく入力されていることを確認してください。

同様の問題があり、列のテキストが壊れないことがわかりました。このcssコードを使用すると問題が解決しました

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

これが私のやり方です。

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

今日も同じ問題に遭遇します。

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

以下のように私のコード。

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

このソリューションも確認してください。これは私のDataTableの列幅の問題を簡単に解決しました

jQuery DataTables 1.10.20は、columns.adjust()Bootstrap トグルタブの問題を修正するメソッドを導入します

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

ドキュメントを参照してください：スクロールタブとブートストラップタブ

これは正常に動作します。

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