5

BootstrapでDataTablesを使用していて、すべて機能しています。次に、タブにテーブルが必要でした。これを行うと、テーブルヘッダーが狭くなり、ヘッダーテキストの幅にぴったり収まります。ページが表示されているときにタブがアクティブになっている場合、テーブルは見栄えがします。あなたは私が言っていることの例を見ることができます。タブ1は問題ないようです。タブ2には狭いヘッダーがあります。

並べ替えを有効にしてタブ2の列をクリックすると、ヘッダーは適切な幅に拡大しますが、常に狭く始まります。

4

5 に答える 5

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({ ... });
});
于 2012-07-13T14:14:04.610 に答える
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再初期化アラートに悩まされることはありません。

これがBootStrap1で機能するかどうかはわかりませんが、BootStrap2で機能することはわかっています。

于 2013-01-03T15:20:23.223 に答える
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

注：私は2ではなくBootstrap 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

                    });

お役に立てれば。

于 2012-08-12T01:30:34.477 に答える
0

同じ問題が発生しました。すべてのタブをアクティブに設定し、ドキュメントの準備ができたら、最初のタブを除くすべてのタブのアクティブなクラスを削除しました。非常に醜いハックですが、私はより良い方法を見つけることができませんでした

于 2012-08-05T12:32:55.093 に答える