Friday, August 15, 2014

jQuery Fixed Table Headers in BlueBox

A recent plugin added to BlueBox is Misha Koryak's FloatThread. This allows you to fix the table header within a fixed-width div as follows:


<div style=width:1000px;height:300px;overflow:auto; id=reportwrapper>

<table width=100% cellpadding=5 cellspacing=1 bgcolor=silver id=report_table_pointer>
<thead>
   <tr>
     <th> .. some content here .. </th>
     <th> .. some content here .. </th>
   </tr>
</thead>
<tbody>
   <tr>
     <td> .. some content here .. </td>
     <td> .. some content here .. </td>
   </tr>
</tbody>
</table>

</div>

<script src=\"engine/3rdparty/jquery/table_headers/jquery.floatThead.min.js\"></script>
<script>
var float_headers = jQuery('#report_table_pointer');
float_headers.floatThead({
scrollContainer: function(table){
return table.closest('#reportwrapper');
        }
});
</script>

No comments:

Post a Comment