5

我正在将 DataTables 与 Bootstrap 一起使用，并且一切正常。然后我需要一个标签中的表格，当我这样做时，表格标题开始变窄，正好适合标题文本的宽度。如果显示页面时选项卡处于活动状态，则表格看起来很棒。你可以看到我的意思的一个例子。Tab 1 看起来不错。选项卡 2 具有窄标题。

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

4

5 回答 5

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

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

我不确定这是否适用于 BootStrap 1，但是，我知道它适用于 BootStrap 2。

于 2013-01-03T15:20:23.223 回答
3

看起来您的标题列已使用width: 0px. 我假设是因为它们没有被渲染（Tab 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({ ... });
});
于 2012-07-13T14:14:04.610 回答
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();
    }
});

更多信息请访问： http: //getbootstrap.com/javascript/#tabs

于 2014-10-03T11:46:04.593 回答
1

注意：我使用的是 Bootstrap 1，而不是 2：但它可能对你有用。

经过多次试验和错误，这是我添加的功能，用于在单击正确的选项卡时重绘 dataTable（也没有抱怨重绘）：

$(function() {   
    $('a[href="#tab2"]').live('click', function () {
     var oTable = $('#dataTables4').dataTable();
      oTable.fnDraw();
    }); 
});

这是我的数据表代码。请注意确保表格在显示之前完全绘制的回调：

    $('#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

                    });

希望这可以帮助。

于 2012-08-12T01:30:34.477 回答
0

我遇到了同样的问题，我只是将所有选项卡设置为活动，并在准备好文档时，删除了除第一个选项卡之外的所有选项卡的活动类。非常丑陋的黑客，但我无法找到更好的方法

于 2012-08-05T12:32:55.093 回答