【JQuery】FixedHeaderTable–凍結標題列
使用JQuery前，需要引用Jquery元件及FixedHeaderTable元件。
固定Table的標頭(Header)，適用於資料量無法在一個頁面呈現，卻不用分頁的一個顯示方式，易於閱讀。
格式語法︰
<table>
<!-- 頁首標題 start -->
<thead>
<tr>
<th></th>
</tr>
</thead>
<!-- 頁首標題 end -->
<!-- 頁尾標題 start (若不需要顯示頁尾，則可省略) -->
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<!-- 頁尾標題 end (若不需要顯示頁尾，則可省略)-->
<!-- 內容 start -->
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<!-- 內容 end -->
</table>
HTML 頁面(參考)︰
<div class="fullScreenTable" >
<table cellspacing="1" id="GridView1" border="1" >
<!-- 頁首標題 start -->
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Geometry</th>
</tr>
</thead>
<!-- 頁首標題 end -->
<!-- 內容 start -->
<tbody>
<tr>
<td>Student01</td>
<td>Languages</td>
<td style="width:50px">male</td>
<td>75</td>
<td>80</td>
</tr>
</tbody>
<!-- 內容 end -->
</table>
</div>
Javascript︰
<script type="text/javascript">
jQuery(document).ready(function() {
var windowHeight = $(window).height() - 50;
$('.fullScreenTable').css({ 'height': windowHeight+'px'});
$(window).resize(function() {
var windowHeight = $(window).height() - 50;
$('.fullScreenTable').css({'height': windowHeight+'px'});
});
$('.fullScreenTable').fixedHeaderTable({footer:false,cloneHeaderToFooter:true, autoResize:true, fixCol1:true});
});
//參數footer(頁尾):false(不顯示)/true(顯示)
</script>
CSS(參考)︰
<style>
div.fullScreenTable {
display:block;
position:relative;
width:100%;
height:100%;
overflow:hidden;
float:left;
}
</style>
執行畫面︰
參考資源︰
固定Table的標頭(Header)
留言
張貼留言