1

On page load I have a table that is contained in a hidden div. The table only has header and footer definitions, but no data rows. The data rows a loaded dynamically using Ajax.

Once a user clicks on a button, the hidden div containing the table (and other static text) is shown. My problem is that the table layout does not look very nice since I am using width = 100% and at the beginning the table is hidden and hat 0 width to start out with.

Ideally I would like to know if there is a way to force a redraw of the table once the div is visible?

Andre
  • 1,852
  • 1
  • 16
  • 21

3 Answers3

1

I'm assuming you have code similar to this:

success: function (response) {
    $('mytable').html(response).show();
}

Why not set the width after the show method, like this:

success: function (response) {
    $('mytable').html(response).show();
    $('mytable').css('width', '100%');
}
JesseBuesking
  • 6,496
  • 4
  • 44
  • 89
0

my suggestion is to style the table with CSS. There are two strategies that I use:

  1. I use firebug to get the right style and then put it in the stylesheet.
  2. Put the table in place with dumby data and style it with the stylesheet.. then move it later.
natedavisolds
  • 4,305
  • 1
  • 20
  • 25
0

You could clone() the element, then remove() it and then insert the copied clone and show it.

You can clone(true, true) with two parameters to rebind all events when insert again. If this does not work, there is an other way by John Reisig itself: What is the most efficient way to deep clone an object in JavaScript? This worked for me once when clone() was not enough. Use a jQuery element as "oldObject" from the first answer.

Example: 

// Deep copy
var newObject = jQuery.extend(true, {}, $('#tableToClone'));
$('#tableToClone').remove();
$('#divArroundTable').html(newObject);
Community
  • 1
  • 1
powtac
  • 40,542
  • 28
  • 115
  • 170