FixedHeader.js：將網頁表格標題列固定住的程式

這兩個月因為新專案的關係，以jQuery為基底，使用了下列外掛打造全新的網頁系統：

以上各個元件待有空再來介紹，以下要介紹的是DataTables為它的外掛寫的一個獨立程式：FixedHeader.js，提供了將表格(<table>)的標題列固定在網頁上的功能。

FixedHeader 使用方法

• 與DataTables合用時使用以下程式：

 
  $(document).ready( function () {
    var oTable = $('#example').dataTable();
    new FixedHeader( oTable );
  } );
  

• 獨立使用時：

 
  $(document).ready( function () {
    new FixedHeader(document.getElementById('表格的ID') );
  } );
  

使用FixedHeader後，很簡單的就能把標題列固定，不會因為資料捲動而消失。呈現的範本可瀏覽此網頁下方的Example表格。

＃＃

您可能也會有興趣的類似文章

• jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
• [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
• [jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
• 用jQuery.formError取代alert( ) (0則留言, 2016/11/21)
• 替部落格的側邊欄位加上縮起與展開功能 (2則留言, 2007/03/18)
• 在Xuite測試 jQuery (0則留言, 2007/09/12)
• jQuery選擇器測試與範例 (0則留言, 2007/09/29)
• 第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
• 使用jQuery的效益 (0則留言, 2007/09/23)
• 第一個jqGrid範例：Local array (1則留言, 2010/02/13)
• 在Xuite裡使用jQuery的重點 (0則留言, 2007/09/22)
• jQuery神奇的選擇器(Selector) (3則留言, 2007/09/28)
• 第3個jqGrid範例: XML與XML STRING格式 (2則留言, 2010/02/14)
• 第2個jqGrid範例：增加額外選項設定 (6則留言, 2010/02/13)
• IE和FireFox存取同名物件有不同的作法 (0則留言, 2007/04/08)