Twitter bootstrap 在非活动选项卡上用引导修饰的DataTable具有窄标题

我正在使用带有引导的数据表，并使其全部正常工作。然后我需要一个选项卡中的表格，当我这样做时，表格标题开始变窄，刚好适合标题文本的宽度。如果显示页面时该选项卡处于活动状态，则该表看起来很棒。你可以理解我的意思。表1看起来不错。表2的标题很窄

---

如果启用排序并单击选项卡2上的列，标题将扩展到适当的宽度，但总是从窄开始。

看起来您的标题列是用

宽度：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({ ... });
});

---

我也遇到了同样的问题，我只是将所有选项卡设置为活动，在文档就绪时，删除了除第一个选项卡之外的所有选项卡的活动类。

---

非常难看的黑客，但我还没有找到更好的方法。

注意：我使用的是Bootstrap 1，不是2：但它可能适合您

经过多次尝试和错误，这是我添加的函数，用于在单击正确的选项卡时让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

                    });

$（'#loadingT'）.show（）；
$（'#dataTables4'）。dataTable({
“fnDrawCallback”：函数（）{
$（'#loadingT'）.hide（）；
$（“.dataListT”）.fadeIn（2000年）；
},   
“bPaginate”：错误，
“崩溃”：没错，
“sScrollY”：“305px”，
“aaSorting”：[[2，“说明”]，[3，“说明”]，
“sDom”：“t”，
“aoColumns”：[
{“bSortable”：false}，
无效的
无效的
无效的
无效的
{“iDataSort”：6}，
{“bVisible”：false}，
{“bVisible”：false}，
无效的
],
“fnFooterCallback”：函数（nRow、aaData、iStart、iEnd、aiDisplay）{
/*计算此页面上的交易总额*/
var合计=0；
对于（var i=iStart；i我发现发生在工作中的情况如下：

$('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();
 }
});

我真的在绞尽脑汁想这个问题，但是因为它只检查一次表是否在单击引导选项卡后已初始化，所以您不应该受到DataTable重新初始化警报的困扰

我不确定这是否适用于BootStrap 1，但是，我知道它适用于BootStrap 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();
    }
});

更多信息请访问：
是的，我已经这样做了。必须进行一些操纵以检测表是否已呈现，因为DataTables会抱怨重新呈现本身。因此，这是一个很好的破解，但不是一个解决方案。谢谢。除非/直到非破解解决方案出现，否则将此标记为答案。
$('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();
    }
});