How to change dynamically height of one table, leaving another height unchanged

woocash_lw

Hello everybody.
I would like to display two datatables on the same page.
- table example - that is scrollable and fitted to the page height (as in this example live.datatables.net/begahafe/2/edit)
- table example2 - that is scrollable and has constant height
The problem is that changes made to css :
$('#example_wrapper .dataTables_scrollBody').css("height",height+"px").css("max-height",height+"px");
refer also to the second table (example2 gets same height as table example).
Is there any way to fix it?

Regards,
Lucas

kthorngren

Sounds like you might want to use the ScrollResize plugin.

Kevin

woocash_lw

Thanks for your answer Kevin.
I tried scroolResize plugin erlier, same situation.
I didn't mentioned that table with constant height (example2) is in child row of first table (example). That is the problem. Although two tables have different ID's, both get same height after window changes height.
I "sticked up" two examples here live.datatables.net/vipiyaco/1/edit
When browser window changes its size, both tables (main with id=example and child row with different id) changes height.
How to avoid this situation?

kthorngren

Looks like you need to make your jQuery selector more specific and only select the first .dataTables_scrollBody in the #example_wrapper div, like this:

$('#example_wrapper .dataTables_scrollBody:eq(0)')

Updated example:
http://live.datatables.net/vipiyaco/2/edit

Kevin

woocash_lw

Ok, I get it now. I'm glad you guys are on this forum Thanks again.