jQuery DataTables：テーブル幅の制御
https://stackoverflow.com/questions/604933
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
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 =＆quot; width：0px;＆quot;に注意してください）
<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 ] }
]
} );
} );
詳細については、こちらをご覧ください。
他のヒント
dataTablesを初期化するときに、 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にコメントを付けて、どれだけ接近するかを確認してください。
まあ、私はそのプラグインに精通していませんが、データテーブルを追加した後にスタイルをリセットできますか？次のようなもの
$("#querydatatablesets").css("width","100%")
.dataTable呼び出しの後？
jQuery('#querytableDatasets').dataTable({
"bAutoWidth": false
});
データテーブルの列幅に関して多くの問題がありました。私にとっての魔法の修正は、行を含めることでした
table-layout: fixed;
このcssは、テーブルのcss全体に適用されます。たとえば、次のようなデータテーブルを宣言した場合：
LoadTable = $('#LoadTable').dataTable.....
その後、マジックcss行はクラスLoadtableに入ります
#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;
}
TokenMacGuysソリューションは、jQdataTableのバグの結果であるため、最適に機能します。起こるのは、$（ '＃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%");
}
});
各列に sWidth を使用して明示的に幅を設定し、 dataTable の初期化で bAutoWidth：false を使用すると、（同様の）問題が解決しました。あふれるスタックが大好きです。
固定フィールドなしで少なくとも1つのフィールドを残す必要があります。例：
$('.data-table').dataTable ({
"bAutoWidth": false,
"aoColumns" : [
null,
null,
null,
null,
{"sWidth": "20px"},
{ "sWidth": "20px"}]
});
すべてを変更できますが、1つだけをnullのままにしておくと、ストレッチできます。 ALLに幅を付けると機能しません。今日誰か助けてくれたらいいのに！
このcssクラスをページに追加すると、問題が修正されます：
#<your_table_id> {
width: inherit !important;
}
"fnInitComplete": function() {
$("#datatables4_wrapper").css("width","60%");
}
これはテーブル全体の幅を調整するためにうまく機能しました。ありがとう、ピーター・ドリンナン！
Datatable 10.1と同様、これは簡単です。 HTMLで表に幅属性を設定するだけです。 つまり、width =＆quot; 100％＆quot;の場合、DTによって設定されたすべてのCSSスタイルがオーバーライドされます。
こちらをご覧ください http://www.datatables.net/examples/basic_init/flexible_width。 html
ここでの解決策はどれもうまくいきませんでした。 datatablesホームページの例でも機能しませんでした。そのため、オプションを表示します。
問題の解決策を見つけました。コツは、タブにアクティブ化オプションを使用し、表示されているテーブルで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() { ... });
サイジングは、完全にロードされるドキュメントに依存する可能性が高いです。
固定ヘッダープラグインを使用してテーブル/セル幅を調整できない場合：
Datatablesは、列幅パラメーターのtheadタグに依存しています。これは、テーブルの内部htmlのほとんどが自動生成されるため、本当に唯一のネイティブhtmlであるためです。
ただし、発生するのは、セルの一部がtheadセル内に格納されている幅より大きくなる可能性があることです。
つまりテーブルに多くの列（幅の広いテーブル）があり、行に多くのデータがある場合、子の行がオーバーフローに基づいてtdのサイズを自動的に変更するため、「sWidth」を呼び出してtdセルサイズを適切に変更できませんこれは、テーブルが初期化され、その初期化パラメータを渡された後 発生します。
元のthead＆quot; sWidth＆quot ;:パラメータはオーバーライドされます（縮小）。これは、データテーブルがテーブルのデフォルト幅がまだ％100であると判断するためです。一部のセルがオーバーフローしていることを認識しません。
これを修正するために、オーバーフロー幅を把握し、テーブルが初期化された後に テーブルのサイズを適切に変更することでそれを説明しました。同時：
$(document).ready(function() {
$('table').css('width', '120%');
new FixedHeader(dTable, {
"offsetTop": 40,
});
});
＆quot;成功＆quot;内に固定ヘッダーを作成します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および＆amp;の前に、他のすべてのパラメーターを確認してください。 aoColumnsは正しく入力されます。前に間違ったパラメーターを入力すると、この機能が壊れます。
iにも同様の問題があり、列内のテキストが破損しないことがわかり、この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();
}
});
これは正常に動作します。
#report_container {
float: right;
position: relative;
width: 100%;
}
