DataTablesのヘッダーが幅の広いテーブルの列とずれている問題を修正
問題
sScrollX、sScrollXInner、および/またはsScrollYを使用して、内部コンテンツのスクロールを伴う固定ヘッダーテーブルを実現すると、テーブルのヘッダーは、本文の残りの部分と整列しなくなりますChromeおよびIE。一方、Firefoxはそれらを完全に表示します。
私の知る限り、バージョン1.9.4を使用すると、この問題は、幅が変動し、小さな列と同じ列に結合された非常に長い/ラップできない単語がある多くのデータがある場合にのみ発生します。また、問題のテーブルはかなり広い必要があります。
これらすべての要因は、この fiddle で示されています。
出力
Chrome：
IE：
Firefox
推奨ソリューション
これらの解決策は以前に提案されましたが、私の実装には効果がありませんでした。これらの提案のいくつかにより、この効果に他のコードが寄与していないことを確認したかったので、クリーンなプレーンバニラデモをセットアップしました。
- すべてのCSSをオフにする/削除する
setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );oTable.fnFilter( "x",0 )とoTable.fnFilter( "",0 )をこの順序で呼び出す"sScrollXInner": "100%"- すべての幅を取り除く
ヘッダーの位置がずれていることがわかった唯一の解決策は、sScrollXとsScrollYを取り出すことでしたが、固定ヘッダー/内部コンテンツのスクロール機能が失われるため、ソリューションとしてカウントできません。悲しいことに、それは一時的なハックであり、修正ではありません！
注意
最新の fiddle で編集/再生するには。
リンクhttp://jsfiddle.net/pratik136/etL73/#REV# where 1 <= #REV# <= 12を使用して、フィドルの改訂履歴で確認できるさまざまな組み合わせを試しました。
歴史
StackO
この質問は以前に尋ねられました： jQuery Datatables Header Misaligned With Vertical Scrolling
しかし、重大な違いは、その質問のOPが、すべてのCSSが削除された場合に問題を修正できると言及していることです。これは私の場合は正しくありません。再投稿に値する。
外部
この問題は、DataTablesフォーラムでも報告されています。
- http://datatables.net/forums/discussion/7395/sscrolly-and-sscrollx-broken/p1
- http://datatables.net/forums/discussion/7778/vertical-scrolling-messes-up-column-header-alignment#Item_1
- http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
- 私のバグレポート： http://datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh#Item_1
この問題は私を夢中にさせました！ご意見をお寄せください！
編集：最新の Fiddle と「固定ヘッダー」を参照してください：
Fiddle 。
解決策の1つは、DataTablesプラグインにそれを行わせるのではなく、自分でスクロールを実装することです。
あなたの例を取り上げ、sScrollXオプションをコメントアウトしました。このオプションが存在しない場合、DataTablesプラグインはテーブルをそのままコンテナdivに配置します。このテーブルは画面から引き出されるため、必要な幅とオーバーフロープロパティセットを持つdivに入れることができるように修正します-これはまさに最後のjQueryステートメントが行うことです-既存のテーブルを300px幅のdivにラップします。おそらくラッピングdivの幅（この例では300px）を設定する必要はないでしょう。クリッピング効果が簡単に見えるようにここにあります。ニースであること、そのインラインスタイルをクラスに置き換えることを忘れないでください。
$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
"iDisplayLength": -1,
"bPaginate": true,
"iCookieDuration": 60,
"bStateSave": false,
"bAutoWidth": false,
//true
"bScrollAutoCss": true,
"bProcessing": true,
"bRetrieve": true,
"bJQueryUI": true,
//"sDom": 't',
"sDom": '<"H"CTrf>t<"F"lip>',
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
//"sScrollY": "500px",
//"sScrollX": "100%",
"sScrollXInner": "110%",
"fnInitComplete": function() {
this.css("visibility", "visible");
}
});
var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});
以下は、固定ヘッダーテーブルを実現する方法です。目的に十分かどうかはわかりません。変更点は次のとおりです。
- 「sScrollXInner」の代わりに「bScrollCollapse」を使用します
- フィールドセットを使用してテーブルをラップしないでください
- 「div.box」cssクラスを追加します
ローカルマシンでは完全に動作しているように見えますが、Fiddleを使用しても完全には動作しません。 Fiddleがcssファイル（normalize.css）を追加し、何らかの方法でプラグインcssを壊したようです（Fiddleでcssの明確なルールを追加して、しかし、今さらに調査する時間はありません）
私の作業コードスニペットは以下です。これが役立つことを願っています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
<style type='text/css'>
div.box {
height: 100px;
padding: 10px;
overflow: auto;
border: 1px solid #8080FF;
background-color: #E5E5FF;
}
.standard-grid1, .standard-grid1 td, .standard-grid1 th {
border: solid black thin;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
"iDisplayLength": -1,
"bPaginate": true,
"iCookieDuration": 60,
"bStateSave": false,
"bAutoWidth": false,
//true
"bScrollAutoCss": true,
"bProcessing": true,
"bRetrieve": true,
"bJQueryUI": true,
"sDom": '<"H"CTrf>t<"F"lip>',
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"sScrollX": "100%",
//"sScrollXInner": "110%",
"bScrollCollapse": true,
"fnInitComplete": function() {
this.css("visibility", "visible");
}
});
});
});
</script>
</head>
<body>
<div>
<table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
<thead>
<!-- put your table header HTML here -->
</thead>
<tbody>
<!-- put your table body HTML here -->
</tbody>
</table>
</div>
</body>
</html>
IE9でも同じ問題が発生しています。
HTMLをページに書き込む前に、RegExpを使用してすべての空白を削除します。
var Tables=$('##table_ID').html();
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
Tables= Tables.replace(expr, '><');
$('##table_ID').html(Tables);
oTable = $('##table_ID').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"sScrollY": ($(window).height() - 320),
"sScrollX": "100%",
"iDisplayLength":-1,
"sDom": 'rt<"bottom"i flp>'
} );
これらの2行を追加すると、この問題は修正されました。
"responsive": true,
"bAutoWidth": true
レスポンシブプラグインが利用可能になりました： https://datatables.net/extensions/responsive/ 。しかし、私の経験では、まだいくつかのバグがあることがわかりました。今でも私が見つけた最良の解決策です。
空白文字列を含むDataTableを初期化した後、DataTable検索機能をトリガーします。 theadのミスアライメントをtbodyで自動的に調整します。
$( document ).ready(function()
{
$('#monitor_data_voyage').DataTable( {
scrollY:150,
bSort:false,
bPaginate:false,
sScrollX: "100%",
scrollX: true,
} );
setTimeout( function(){
$('#monitor_data_voyage').DataTable().search( '' ).draw();
}, 10 );
});
私は同じ問題を抱えていましたが、このコードはそれを解決します。この記事からこの解決策を得ましたが、それが機能するように間隔の時間を調整する必要がありました。
setTimeout(function(){
oTable.fnAdjustColumnSizing();
},50);
bootstrapユーザーの場合、これにより修正されました。
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.fixedColumns().relayout();
記事を参照してください こちら
以下のコードは機能しました。 I.E 9.0以降の問題を修正しました。お役に立てれば
var oTable = $('#tblList').dataTable({
"sScrollY": "320px",
"bScrollCollapse": true,
});
setTimeout(function(){
oTable.fnAdjustColumnSizing();
},10);
これを試してください、次のコードは私の問題を解決しました
table.dataTable tbody th,table.dataTable tbody td
{
white-space: nowrap;
}
詳細については、plsで Here を参照してください。
ScrollYを使用する場合：
$（ '。DataTables_sort_wrapper'）。trigger（ "click"）;
これは、列データごとの自動列非表示に使用します。その場合、場合によってはブレークテーブル構造になります。私はこれでその問題を解決します$（$。fn.dataTable.tables（true））。DataTable（）。columns.adjust（）;およびこの関数$（ '＃datatableId'）。on（ 'draw.dt'、function（）{}）;テーブルデータのロード後に呼び出します。
$('#datatableId').on('draw.dt', function () {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
})
以下のコードをcssに追加して、アプリケーションの同じ問題を修正しました-
.dataTables_scrollHeadInner
{
width: 640px !important;
}
table-layout: fixedをテーブルのスタイル（cssまたはスタイル属性）に追加します。
ブラウザは、サイズの制約を解決するためのカスタムアルゴリズムの適用を停止します。
固定テーブルレイアウトでの列幅の処理に関する情報をWebで検索します（ここに2つの簡単なSO質問があります： here および here ）
明らかに、デメリットは、列の幅がコンテンツに適合しないことです。
[編集] FixedHeaderプラグインを使用したとき、私の答えは機能しましたが、データテーブルのフォーラムへの投稿は、sScrollXオプションを使用すると他の問題が発生することを示しているようです。
sScrollXが設定されている場合は、bAutoWidthとsWidthは無視されます（v1.7.5）
これを回避する方法を見つけようとします。
できる限りのことを試した後、"autoWidth": trueを追加しましたが、うまくいきました。
すでにフラグが立てられた回答があったことは知っていますが、上記ではうまくいかないような同様の問題を抱えている人にとっては。 bootstrapテーマと組み合わせて使用しています。
DataTables.fixedHeader.jsファイルで変更できる行があります。関数のデフォルトのレイアウトは次のようになります。
_matchWidths: function (from, to) {
var get = function (name) {
return $(name, from)
.map(function () {
return $(this).width();
}).toArray();
};
var set = function (name, toWidths) {
$(name, to).each(function (i) {
$(this).css({
width: toWidths[i],
minWidth: toWidths[i]
});
});
};
var thWidths = get('th');
var tdWidths = get('td');
set('th', thWidths);
set('td', tdWidths);
},
変更
return $(this).width();
に
return $(this).outerWidth();
outerWidth（）は、新しいバージョンのjqueryを使用している場合、jquery.dimensions.jsに含まれる関数です。すなわち。 jquery-3.1.1.js
上記の機能は、元のテーブルのthをマップし、「クローン」テーブル（固定ヘッダー）に適用します。私の場合、位置がずれていると、常に約5〜8ピクセルずれていました。ほとんどの場合、最善の解決策ではありませんが、テーブル宣言ごとに指定することなく、ソリューション内の他のすべてのテーブルにソリューションを提供します。これまではChromeでのみテストされていますが、すべてのブラウザーで調整ソリューションを提供する必要があります。
以下の概念を使用して列の問題を修正しました
$(".panel-title a").click(function(){
setTimeout( function(){
$('#tblSValidationFilerGrid').DataTable().search( '' ).draw();
}, 10 );
})