Bootstrap Tab and multiple datatables

ShaneBrennan

Ok I'm sure this is a common problem but can't find solution. I'm trying use a Bootstrap tab - both to display a datatable each... the 1st tab (active) is perfect no issues... the 2nd all the columns are pushed to the left and have not been resized to fit the space. Has anyone see this before and have a solution. The code snippet is:

   <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">  
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">  
   <link rel="stylesheet" type="text/css" href="../css/bootstrap-datepicker3.standalone.css">   

:      :      :      :     :      :      :      :     :      :      :      :    

      <div class="bs-example">
         <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#sectionA"><h2>Buildings</h2></a></li>
            <li><a data-toggle="tab" href="#sectionB"><h2>Products/Services</h2></a></li>
         </ul>
         
         <div class="tab-content">
            <div id="sectionA" class="tab-pane fade in active">
               <h3>Buildings/Sites included</h3>
               <table id="quoteBuildings" class="table table-striped table-hover">
                  <thead>
                     <tr>
                        <th>Name</th>
                        <th>Town/City</th>
                        <th>County</th>
                        <th width="250px">Scope</th>
                        <th width="250px">Other Req</th>
                        <th width="100px">Actions</th>
                     </tr>
                  </thead>

                  <tfoot>
                     <tr>
                        <th>Name</th>
                        <th>Town/City</th>
                        <th>County</th>
                        <th>Scope</th>
                        <th>Other Req</th>
                        <th>Actions</th>
                     </tr>
                  </tfoot>
               </table>
               <div class="form-group">
                  <div class="col-sm-2 col-sm-offset-5">
                     <button type="Submit" class="btn btn-primary" onclick="dspAddBuildiingDialog()">Add Building</button>
                  </div>
               </div>
            </div>  <!--sectionA-->
            <div id="sectionB" class="tab-pane fade">
               <h3>Products and Services To Provide</h3>
               <table id="quotePandS" class="table table-striped table-hover">
                  <thead>
                     <tr>
                        <th>Product/Sevice Title</th>
                        <th>General Notes</th>
                        <th>Sales Notes</th>
                        <th>Actions</th>
                     </tr>
                  </thead>

                  <tfoot>
                     <tr>
                        <th>Product/Sevice Title</th>
                        <th>General Notes</th>
                        <th>Sales Notes</th>
                        <th>Actions</th>
                     </tr>
                  </tfoot>
               </table>

               <div class="form-group">
                  <div class="col-sm-2 col-sm-offset-5">
                     <button type="Submit" class="btn btn-primary" onclick="dspAddProductServiceDialog()">Add Product/Service</button>
                  </div>
               </div>
            </div>  <!--sectionB-->
         </div> <!-- <div class="tab-content"> -->
      </div> <!-- <div class="bs-example"> -->

:      :      :      :     :      :      :      :     :      :      :      :    

   <script src="../js/bootstrap.min.js"></script>  
   <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
   <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>

   <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
   <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>

ShaneBrennan

ok 10 minutes later I find another forum post that got me 90% of the way there!

Solution seems to be set the 2nd tables width to 100%:

<

table id="quotePandS" class="table table-striped table-hover" width="100%">

then I needed to reduce the side of the last column to 100px.... however, this worked but did not resize the other columns to take utilize that free space.... changing the actions to "10%" has almost got me where I want to be - as this did resize the other three columns:

<th width="10%">Actions</th>

If possible I would still like to get this fixed to 100px but at least I'm 98% closer to what I need.

ShaneBrennan

Ok now have 3rd tab... this one not working as expected - but almost there.

Once I resize the window - it fits just right.... if there someway of detecting when I click on a tab and getting the table to refresh again?

allan

Have a look at this example. You need to call the columns.adjust() method when the table is made visible.

Allan

ShaneBrennan

Hi Allan

Thank you for the info.... I'm really new to Javascript, etc but getting there slowly. I've used your suggestion and created a button (with an onclick) to run the following code and it works great:

     function redrawSectionC() {
        var table = $('#pandSLevelQBQs').DataTable();
        $('#container').css( 'display', 'block' );
        table.columns.adjust().draw();
        table = $('#quoteLevelQBQs').DataTable();
        table.columns.adjust().draw();               

     } 

However, I can't get it to automatically run.. I assume I need to tie it into an event of some description... is this the case... and if so could you point me in the right direction. I did put it on the on-click for the tab- but it runs before the table is displayed.

ShaneBrennan

Hi Allan

Thank you for the help - it really set me on the right path. I've now got the code working. I've been playing with some very clear code from Bootstrap itself and I've tied my code into the event that fires when the contents of the tab has been fully displayed. here is my code:

Which I've also updated to resize the contents of the other 2 tabs as well:

  $(document).ready(function () {
     $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        var currentTab = $(e.target).text(); // get current tab
        switch (currentTab)   {
           case 'Buildings' :   //do nothing
              var table = $('#quoteBuildings').DataTable();
              $('#container').css( 'display', 'block' );
              table.columns.adjust().draw();
              break ;
           case 'Products/Services' :
              var table = $('#quotePandS').DataTable();
              $('#container').css( 'display', 'block' );
              table.columns.adjust().draw();
              break ;
           case 'Questions' :   
              var table = $('#pandSLevelQBQs').DataTable();
              $('#container').css( 'display', 'block' );
              table.columns.adjust().draw();
              table = $('#quoteLevelQBQs').DataTable();
              table.columns.adjust().draw();
              break ;
           default: //do nothing  
        };
     }) ;  
  });

allan

Thanks for posting back. Good to hear you have it working now.

Allan

SalmanS

Hi Allan/ShaneBrennan,

Not sure if you could help.

I got three div elements .well class

<

div class="container">

Grid 1

Grid 2

Grid 3

Got Jquery function click('.well') working fine and trapping alert. So far so good. click('.well') alert is responding. Now i got three tabs underneath Tab1 TAb2 Tab3 I would like to open a datatable grid underneath from table x and when you click

Grid 1

and

when a user clicks

Grid 2

Please note all the grids 1,2,3 are using different tables, ie., grid 1 is using employee table, grid 2 is using customer table and grid 3 is using order table.

Any help is highly appreciated.

Many thanks for your help in advance.