Answers

• ShaneBrennan Posts: 49Questions: 18Answers: 1

  February 2017 edited February 2017

  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 Posts: 49Questions: 18Answers: 1

  February 2017

  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 Posts: 63,516Questions: 1Answers: 10,473 Site admin

  February 2017

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

  Allan
• ShaneBrennan Posts: 49Questions: 18Answers: 1

  February 2017

  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 Posts: 49Questions: 18Answers: 1

  February 2017 Answer ✓

  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 Posts: 63,516Questions: 1Answers: 10,473 Site admin

  February 2017 Answer ✓

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

  Allan
• SalmanS Posts: 102Questions: 12Answers: 0

  October 2018

  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.