103

jQueryDataTablesプラグインを使用してテーブルの幅を制御する際に問題が発生しました。テーブルはコンテナの幅の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%;  
}
4

26 に答える 26

61 
jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});
于 2009-10-09T16:52:48.167 に答える
61

この問題は、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 ] }
        ]
    } );
} );

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

于 2011-03-17T19:32:40.230 に答える
54

dataTables を初期化するときに、次の 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 を参照してください。

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

于 2009-03-12T23:40:27.203 に答える
48

ええと、私はそのプラグインに詳しくありませんが、データテーブルを追加した後にスタイルをリセットしてもらえますか? 何かのようなもの

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

.dataTable 呼び出しの後?

于 2009-03-03T03:05:29.567 に答える
12

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

table-layout: fixed;

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

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

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

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

}

于 2013-05-10T09:34:43.280 に答える
6

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

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

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

すべてを変更できますが、1 つだけを null のままにして、拡張できるようにします。ALL に幅を設定すると、機能しません。今日誰かを助けてくれることを願っています！

于 2012-07-10T12:03:18.637 に答える
5

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

于 2011-06-18T04:49:29.550 に答える
5

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

これを参照してください http://www.datatables.net/examples/basic_init/flexible_width.html

于 2014-05-24T08:15:23.660 に答える
3

ここでの解決策はどれもうまくいきませんでした。datatables ホームページの例でさえ機能しなかったため、show オプションで datatable を初期化しました。

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

});
于 2013-10-02T09:34:46.270 に答える
2

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

于 2009-10-23T12:05:51.043 に答える
2

レディイベントでこれをやっていますか？

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

サイズ設定は、完全にロードされているドキュメントに依存する可能性があります。

于 2009-03-03T03:39:11.530 に答える
1

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

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

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

        new $.fn.dataTable.FixedHeader(table);
}
于 2015-02-11T15:54:26.213 に答える
1

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

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

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

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

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

.mycontainer{background-color:white;padding:5px;}
于 2016-06-24T09:15:21.950 に答える
0

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

于 2011-08-31T16:07:09.827 に答える
0

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

于 2011-10-11T19:22:42.813 に答える
0

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

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


#report_container {
 float: right;
 position: relative;
 width: 100%;
}
于 2011-01-12T23:06:25.727 に答える
0

これが私のやり方です..

$('#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' }
    ]
});
于 2016-01-25T11:20:15.683 に答える
-1

これはうまくいきます。

#report_container {
   float: right;
   position: relative;
   width: 100%;
}
于 2013-02-27T14:07:17.967 に答える