Answers

• allan Posts: 63,794Questions: 1Answers: 10,514 Site admin

  April 2016 Answer ✓

  Hi,

  A couple of things:

  1. Your DataTables and Responsive versions are quite old (1.10.1 and 1.0.0 respectively). 1.10.11 and 2.0.2 are the current release versions)
  2. Because the tabs are initialised after the tables the sizes that Responsive has pre-calculated are wrong (since the tab adds extra padding etc, which is why I think you are seeing this issue).

  You need to call responsive.recalc() when the DOM is modified.

  Updated example: https://codepen.io/anon/pen/XdZXNb

  That works for the first tab. For the second tab you need to call the same responsive.recalc() method when the table is shown, since it doesn't have any dimensions when it is initially calculated. Use the show event from the tab library to know when that happens.

  I'm looking into ways to make this happen automatically in future.

  Allan
• joaorodr84 Posts: 2Questions: 1Answers: 0

  April 2016

  Hi,

  I used the most recent releases and this code:

  /* Recalculates the size of the resposive DataTable */
  function recalculateDataTableResponsiveSize() {
      $($.fn.dataTable.tables(true)).DataTable().responsive.recalc();
  }
  
  $('#tabs').tabs({
      activate: recalculateDataTableResponsiveSize,
      create: recalculateDataTableResponsiveSize
  });
  

  It works. Thanks a lot. :)