How to refresh/resizing after revealing hidden data in a cell

daga461

First time poster. This one is probably really easy. Sorry, there is no web link.

One of my Datatable columns is "contact information". The contact information can take up a lot of space and most people don't want to see it. My solution was to use a jQuery plugin (showhide.js) that hides the detailed contact information in a until people click on the "more" hyperlink. I placed the

The information rolls out nicely, but the Datatable does not resize the table so I end up wiht these awkward scroll bars. Any efforts I have made to call DataTables after the hidden contact informaiotn is revealed results in either the DataTable going dead or the Tabs going dead or both.

If I click around the tabs, I eventually get the table resized, so I just need to force that refresh so that the table gets refreshed.

Here is my code:

$(document).ready(function() {
/* The tabs are used here to filter the table */
$("#tabs").tabs( {
select: function(event, ui) {
/*Initialize Datatables*/
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
oTable.fnFilter(ui.tab.id,2,false); // apply the table filter based on tab id
$('#dataTable').appendTo(ui.panel); // move the table into the selected tab panel
}
} );

/*This is applied when a hyperlink is clicked in the Divs with in the showhide class*/
/* I want to do a Datatables refresh after the .showHide function is called */

$('.show_hide').showHide({
speed: 100, // speed you want the toggle to happen
easing: '', // the animation effect you want.
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'More',// the button text to show when a div is closed
hideText: 'Less'// the button text to show when a div is open
});


$('table.display').dataTable( {
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [ -1 ] }
]
} );


} );
{/code}