Replies

• jfr Posts: 71Questions: 24Answers: 0

  April 2015

  Here is Allan solution
  I am using the dataTabes.scroller.js

      jQuery(function() {
          jQuery("#tabs").tabs({
              active: 0,
              activate: function( event, ui ) {
                  activeTab = ui.newPanel.selector;
                  if (ui.newPanel.selector == "#tab0") {
                      oTable1.columns.adjust().draw();
                      oTable1.scroller().measure();
                  }
                  if (ui.newPanel.selector == "#tab1") {
                      oTable2.columns.adjust().draw();
                      oTable2.scroller().measure();
                  }
              }
          })
      }); 
  

  But the best thing is the follwing link for pageresize
  http://datatables.net/blog/2015-04-10#How-it-works

  Thank Allan and Daniel Buchner.
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  April 2015

  To follow up for anyone else reading this, basically the problem is that when Scroller is activated it calculated the height of the table rows to it can perform its positional calculations. However, if you initialise it in a hidden element, then there is no height that can be calculated!

  I've replicated this in a little test case here:

  • http://live.datatables.net/hemebusi/1/edit

  Note that the table appears to be empty (it does actually have data, as do your own, but because the row height is 0, you can't see it!).

  The fix is to have Scroller calculate the row height when the tab is made visible. The row height in Scroller can be recalculated through use of the scroller().measure() API method that Scroller adds to the DataTables API. My little test case shows the problem being resolved using that method here:

  • http://live.datatables.net/hemebusi/2/edit

  For anyone interested in further options, I've recently come up with an idea for how this requirement to call an API method can be resolved. There are details on a recent blog post here:

  • http://datatables.net/blog/2015-04-10#How-it-works

  The only downside that I can see at the moment is that IE requires a solid background colour for the table using that method. Otherwise it paints a border around the table that simply cannot be removed...

  Allan