Geek asks and answers

DataTable, adorned with Bootstrap on an inactive tab, has a narrow title

I use DataTables with Bootstrap and it all works. Then I needed a table on a tab, and when I do this, the table title starts narrow, just adjusting to the width of the title text. If the tab is active when the page is displayed, the table looks great. You can see an example of what I mean. Tab 1 looks good. Tab 2 has a narrow title.

If I turn on sorting and click the column in tab 2, the title will expand to the appropriate width, but will always be narrow.

+5
source share
5 answers

, 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({ ... });
});
+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.

+3

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

+2

. 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

                    });

, .

+1

, , , . , .

0

More articles:


All Articles