我正在使用带有Bootstrap的DataTables并将其全部工作。然后我需要一个选项卡中的表格,当我这样做时,表格标题开始变窄,恰好适合标题文本的宽度。如果在显示页面时选项卡处于活动状态,则表格看起来很棒。你可以看到example我的意思。标签1看起来很好。标签2具有窄标题。
如果我启用排序并单击选项卡2上的列,则标题会扩展到适当的宽度,但始终会缩小。
答案 0 :(得分:3)
看起来您的标题列已使用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({ ... });
});
答案 1 :(得分:3)
我发现恰好工作的是以下内容:
$('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();
}
});
我真的在这个问题上绞尽脑汁,但是因为在点击Bootstrap选项卡之后它只检查了一次表是否已初始化,所以不应该使用DataTable重新初始化警报。
我不确定这是否适用于BootStrap 1,但是,我知道它适用于BootStrap 2.
答案 2 :(得分:2)
在bootstrap 3.x中,您可以使用以下代码:
$('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();
}
});
答案 3 :(得分:1)
注意:我使用的是Bootstrap 1,而不是2:但它可能对您有用。
经过多次试验和错误,这是我添加的功能,以便在点击正确的标签时重新绘制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
});
希望这有帮助。
答案 4 :(得分:0)
我遇到了同样的问题,我只是将所有选项卡设置为活动状态,并且在文档就绪时,删除了除第一个选项卡之外的所有选项卡的活动类。 非常丑陋的黑客,但我还没有找到更好的方法