私はブートストラップでDataTablesを使用しています。次に、タブにテーブルが必要でした。これを行うと、ヘッダーテキストの幅に合わせてテーブルのヘッダーが狭くなります。ページが表示されているときにタブがアクティブになっている場合は、表が大きく見えます。あなたは私が意味するもののexampleを見ることができます。タブ1は上手く見えます。タブ2には狭いヘッダーがあります。DataTableにBootstrapで装飾された非アクティブなタブが狭いヘッダーを持っています
並べ替えを有効にし、タブ2の列をクリックすると、ヘッダーは適切な幅に展開されますが、常に狭くなります。
ヘッダー列がwidth: 0pxで初期化されているようです。彼らはレンダリングされていないので、私は仮定します（タブ2はdisplay: noneです）。あなたがbootstrap.jsライブラリが含まれている場合
あなたはタブの切り替えで、あなたのDataTableの初期化を試みることができる：
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
$('#table-b').dataTable({ ... });
});
私は同じ問題を抱えていた、私は単純にアクティブにすべてのタブを設定し、文書準備の上、削除最初のタブを除くすべてのタブのアクティブなクラス。 非常に醜いハックですが、私はより良い方法を見つけることができませんでした。
注：私は2ではなく、ブートストラップ1を使用しています。
多くの試行錯誤の後、これが正しいタブがクリックされたとき、私はのdataTableを再描画するために取得するために追加された機能である（なしのいずれか、再描画不満）：
$(function() {
$('a[href="#tab2"]').live('click', function() {
var oTable = $('#dataTables4').dataTable();
oTable.fnDraw();
});
});
ここに私のdataTableのコードがあります。テーブルが表示される前に完全に描画されることを確実にするコールバックに注意してください。
$('#loadingT').show();
$('#dataTables4').dataTable({
"fnDrawCallback":function(){
$('#loadingT').hide();
$(".dataListT").fadeIn(2000);
},
"bPaginate": false,
"bScrollCollapse": true,
"sScrollY": "305px",
"aaSorting": [[ 2, "desc" ],[3, "desc"]],
"sDom": "<'row'<'span16'f>>t<'row'i<'span8'><'span8'>>",
"aoColumns": [
{ "bSortable": false },
null,
null,
null,
null,
{ "iDataSort": 6 },
{"bVisible": false},
{"bVisible": false},
null
],
"fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) {
/* Calculate the total transactions on this page */
var total = 0;
for (var i=iStart ; i<iEnd ; i++)
{
total += aaData[ aiDisplay[i] ][7]* 1;
}
var nCells = nRow.getElementsByTagName('th');
nCells[1].innerHTML = total;
$(nCells[1]).formatCurrency({negativeFormat:'%s-%n'});
}
}).rowGrouping({
iGroupingColumnIndex: 1,
sGroupingColumnSortDirection: "desc",
iGroupingOrderByColumnIndex: 2
});
希望します。
私はそれが仕事に起こったことは以下の通りです：
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
var table = $.fn.dataTable.fnTables(true);
if (table.length > 0) {
$(table).dataTable().fnAdjustColumnSizing();
}
});
私は本当にブートストラップタブがされた後、テーブルが初期化されている場合、それは一度だけチェックがあるため、この1に私の脳をラッキングましたDataTableの再初期化アラートで嫌がらせをしてはいけません。
私はこのブートストラップ1で動作する場合は、しかし、私はそれはあなたがこのコードを使用することができ、ブートストラップ3.xのブートストラップ2.
で動作します知っているかどうか分からない：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
var table = $.fn.dataTable.fnTables(true);
if (table.length > 0) {
$(table).dataTable().fnAdjustColumnSizing();
}
});
はい、私はそれをしました。 DataTableが再レンダリング自体に不平を言うので、テーブルがまだレンダリングされているかどうかを検出するためのリギングを行う必要がありました。これは良いハックですが、解決策ではありません。ありがとう。 – Gregg
非ハックの解決策が表示されない限り、これを答えとしてマークします。 – Gregg