Replies

• rgvcorley Posts: 29Questions: 0Answers: 0

  July 2012 edited July 2012

  Robert,
  
  Have a look here:- http://www.datatables.net/forums/discussion/2957/how-to-change-feature-values-after-datatable-is-already-initialized/p1
  
  taken from the post above by Allan, basically you need to do:-
  [code]oTable.fnSettings().oScroll.sY = whatever;[/code]
  
  And then set the height of the element on the page yourself:
  [code]$('div.dataTables_scrollBody').height( whatever );[/code]
• robertbrower Posts: 158Questions: 1Answers: 0

  July 2012 edited July 2012

  Thanks rgv. I am doing this, but something is wrong with the calculation. The height is too big.
  
  $table.dataTable().fnAdjustColumnSizing(false);
  var $dataTableWrapper = $table.closest(".dataTables_wrapper");
  var panelHeight = $dataTableWrapper.parent().height();
  
  var toolbarHeights = 0;
  $dataTableWrapper.find(".fg-toolbar").each(function(i, obj) {
  toolbarHeights = toolbarHeights + $(obj).height();
  });
  
  var scrollHeadHeight = 0;
  $dataTableWrapper.find(".dataTables_scrollHead").each(function(i, obj) {
  scrollHeadHeight = scrollHeadHeight + $(obj).height();
  });
  
  var height = panelHeight - toolbarHeights - scrollHeadHeight;
  $dataTableWrapper.find(".dataTables_scrollBody").height(height);
  
  I need to substract an additional 24... I do not know where it comes from...
  
  If anyone knows the correct calculations, please let me know and I will add this to the resizePaneDataTables plugin.
  
  Thanks.
  
  Robert
  
  <> the more I think about this, the more I think it is not possible to create a general solution for this problem.
• rgvcorley Posts: 29Questions: 0Answers: 0

  July 2012

  So just subtract another 24:-
  
  [code]var height = panelHeight - toolbarHeights - scrollHeadHeight - 24;[/code]
• allan Posts: 63,281Questions: 1Answers: 10,425 Site admin

  July 2012

  The 24 might come from the information element and paging controls - if you are using that? Or perhaps a footer?
• robertbrower Posts: 158Questions: 1Answers: 0

  July 2012

  var toolbarHeights = 0;
  $dataTableWrapper.find(".fg-toolbar").each(function(i, obj) {
  toolbarHeights = toolbarHeights + $(obj).height();
  });
  
  Shouldn't that get the total height of the header and footer, i.e. the .fg-toolbar elements? Do I have to also add the height of contained elements? In my case, it finds 2 fg-toolbar elements... one on top and one on bottom.
  
  var scrollHeadHeight = 0;
  $dataTableWrapper.find(".dataTables_scrollHead").each(function(i, obj) {
  scrollHeadHeight = scrollHeadHeight + $(obj).height();
  });
  
  I thought this covered the scroll head which also appears to have height. In my case, it finds 1.
  
  Height in general, including my own (6'4") always tends to lead me into trouble ;)
  
  Thanks for the suggestions...
• rgvcorley Posts: 29Questions: 0Answers: 0

  July 2012

  I can't see your markup so I don't know what .fg-toolbar is but the following should get the height of the table head:-
  
  [code]
  $dataTableWrapper.find(".dataTables_scrollHead").height();
  [/code]
  
  There is no need to add up the height of the child elements.
  
  Also I'm a beginner in jQuery, but .each() when you're operating on a jQuery wrapped set simple passes the jquery objects as the function context, so you can do:-
  
  [code]
  $(select some elements).each(function() {
  $(this); // each iteration $(this) is your jquery wrapped of the current element
  });
  [/code]
• robertbrower Posts: 158Questions: 1Answers: 0

  July 2012

  var scrollHeadHeight = 0;
  $dataTableWrapper.find(".dataTables_scrollHead").each(function(i, obj) {
  scrollHeadHeight = scrollHeadHeight + $(obj).height();
  });
  
  You're right. There is no need to use each() for the scroll head. But it should still work since there is only 1.
  
  var toolbarHeights = 0;
  $dataTableWrapper.find(".fg-toolbar").each(function(i, obj) {
  toolbarHeights = toolbarHeights + $(obj).height();
  });
  
  DataTables adds the fg-toolbar class to the header and footer. So because of the possibility of there being more than 1, I use the each() method to get the sum of their heights.
  
  The other problem I have is that fnAdjustColumnSizing causes an ajax refresh of the visible data. I know I can turn that off by passing false, but then I would need to somehow draw the datatable again.
  
  If I can get this working then ui-layout and datatables plugins together will be extremely powerful and nice.
• robertbrower Posts: 158Questions: 1Answers: 0

  July 2012 edited July 2012

  Here is what I have now:
  [code]
  /**
  * UI Layout Callback: resizePaneDataTables
  *
  * This callback is used when a layout-pane contains 1 or more DataTable objects.
  * - whether the DataTable is a child of the pane or is nested within other elements
  * Assign this callback to the pane.onresize event:
  *
  * SAMPLE:
  * $("#elem").tabs({ show: $.layout.callbacks.resizePaneDataTables });
  * $("body").layout({ center__onresize: $.layout.callbacks.resizePaneDataTables });
  *
  * Version: 1.0 - 2012-07-06
  * Author: Robert Brower (atomofthought@yahoo.com)
  */
  ; (function ($) {
  var _ = $.layout;
  
  // make sure the callbacks branch exists
  if (!_.callbacks) _.callbacks = {};
  
  _.callbacks.resizePaneDataTables = function (x, ui) {
  // may be called EITHER from layout-pane.onresize OR tabs.show
  var $P = ui.jquery ? ui : $(ui.panel);
  // find all VISIBLE data tables inside this pane and resize them
  $($.fn.dataTable.fnTables(true)).each(function(i, table) {
  var $table = $(table);
  if ($.contains($table.get(), $P)) {
  
  var $dataTable = $table.dataTable();
  $dataTable.fnAdjustColumnSizing(false);
  
  var $dataTableWrapper = $table.closest(".dataTables_wrapper");
  var panelHeight = $dataTableWrapper.parent().height();
  
  var toolbarHeights = 0;
  $dataTableWrapper.find(".fg-toolbar").each(function(i, obj) {
  toolbarHeights = toolbarHeights + $(obj).height();
  });
  
  var scrollHeadHeight = $dataTableWrapper.find(".dataTables_scrollHead").height();
  var height = panelHeight - toolbarHeights - scrollHeadHeight;
  $dataTableWrapper.find(".dataTables_scrollBody").height(height - 24);
  
  $dataTable.fnDraw();
  }
  });
  };
  })(jQuery);
  [/code]
  
  If anyone knows why I need to subtract 24 from height or why fnDraw() causes server side processing to send an ajax request to update the data, please let me know. Otherwise this seems to work for me...
• robertbrower Posts: 158Questions: 1Answers: 0

  July 2012

  OK, I replaced the call to fnDraw() with _fnScrollDraw() and that solves the server processing ajax problem.
  
  Here's what I have now:
  
  [code]
  /**
  * UI Layout Callback: resizePaneDataTables
  *
  * This callback is used when a layout-pane contains 1 or more DataTable objects.
  * - whether the DataTable is a child of the pane or is nested within other elements
  * Assign this callback to the pane.onresize event:
  *
  * SAMPLE:
  * $("#elem").tabs({ show: $.layout.callbacks.resizePaneDataTables });
  * $("body").layout({ center__onresize: $.layout.callbacks.resizePaneDataTables });
  *
  * Version: 1.0 - 2012-07-06
  * Author: Robert Brower (atomofthought@yahoo.com)
  */
  ; (function ($) {
  var _ = $.layout;
  
  // make sure the callbacks branch exists
  if (!_.callbacks) _.callbacks = {};
  
  _.callbacks.resizePaneDataTables = function (x, ui) {
  // may be called EITHER from layout-pane.onresize OR tabs.show
  var $P = ui.jquery ? ui : $(ui.panel);
  // find all VISIBLE data tables inside this pane and resize them
  $($.fn.dataTable.fnTables(true)).each(function(i, table) {
  var $table = $(table);
  if ($.contains($table.get(), $P)) {
  
  var $dataTable = $table.dataTable();
  $dataTable.fnAdjustColumnSizing(false);
  
  var $dataTableWrapper = $table.closest(".dataTables_wrapper");
  var panelHeight = $dataTableWrapper.parent().height();
  
  var toolbarHeights = 0;
  $dataTableWrapper.find(".fg-toolbar").each(function(i, obj) {
  toolbarHeights = toolbarHeights + $(obj).height();
  });
  
  var scrollHeadHeight = $dataTableWrapper.find(".dataTables_scrollHead").height();
  var height = panelHeight - toolbarHeights - scrollHeadHeight;
  $dataTableWrapper.find(".dataTables_scrollBody").height(height - 24);
  
  $dataTable._fnScrollDraw();
  }
  });
  };
  })(jQuery);
  [/code]
  
  If anyone knows why I need to subtract 24 from the height please let me know.
  
  Bob