jQuery DataTables範例1：啟始設定

DataTables的啟始相當簡單，只要呼叫dataTable方法就可以，真正複雜的是傳入的選項參數。

 
// 指定ID為TBL的元素執行dataTable方法，並傳入參數_oTableOptions(JSON格式).
oTable = $("#TBL").dataTable(_oTableOptions);

選項參數的完整列表請參考Usage Features與Usage Options，在仔細觀看這些參數項目前，最好先了解一下DataTables各個識別字使用的慣用命名規則：

• a - array
• b - boolean
• f - float
• fn - function
• i - integer
• n - node (表格的一個節點)
• o - object
• s - string

其實就是來自微軟的簡化過的Hungarion Notation，因此選項aaData從名稱就可以知道是存放資料的二維陣列(aa = Array of Array)。以下是我常用的選項項目與它們的簡單說明：

• bJQueryUI： 是否與jQuery UI整合
• oLanguage： {'sUrl': '語言文字檔'}或直接傳JSON物件；語言檔內容範例：

  {
      "sProcessing": "處理中...",
      "sLengthMenu": "顯示 _MENU_ 筆記錄",
      "sZeroRecords": "無符合資料",
      "sInfo": "目前記錄：_START_ 至 _END_, 總筆數：_TOTAL_",
      "sInfoEmpty": "無任何資料",
      "sInfoFiltered": "(過濾總筆數 _MAX_)",
      "sInfoPostFix": "",
      "sSearch": "過濾",
      "sUrl": "",
      "oPaginate": {
          "sFirst":    "首頁",
          "sPrevious": "上頁",
          "sNext":     "下頁",
          "sLast":     "末頁"
      }
  }
  

• bProcessing：是否顯示資料處理中的訊息
• aoColumnDefs：欄位定義陣列，以各種定義參數的兩個元素組成，第一個是選項名，第二個aTargets指定作用的欄位編號。以下範例將欄位0設成不能排序，欄位5、6內容右靠：

 
  [
      {
        "bSortable": false,
        "aTargets": [ 0 ]
      },
      {
        "sClass": "align_right",
        "aTargets": [ 5,6 ]
      }
    ]

• bPaginate：是否使用資料分頁模式
  • DataTables的資料顯示大致有分頁與捲動兩種模式，bPaginate設成true時，可以再用sPaginationType來設定分頁的顯示格式
  • 預設的格式有"two_button"與"full_numbers"兩種
  • 如果不使用分頁模式則會變成捲動模式，必須以sScrollY指定顯示的高度，當資料超出指定大小時就會變成捲動，如："sScrollY": "450px"
  • 在捲動模式下，表格是否依據資料筆數而自動浮動顯示。當"bScrollCollapse":"true"時，只有兩筆資料則表格底部會緊鄰第二筆下方，若設成"false"則表底會固定在450px的位置

只要這些參數就能讓DataTables顯示出一個很專業的資料表格。以下是測試環境建置的步驟：

1. 由DataTables下載網址將最新版的v1.8.2壓縮檔存入硬碟
2. 解壓縮到c:\tmp，官方的範例程式皆在 c:\tmp\DataTables-1.8.2\examples資料夾裡
3. 在瀏覽器輸入「file:///c:/tmp/DataTables-1.8.2/examples/basic_init/zero_config.html」就能看到最基本的DataTables樣貌。這個範例是不傳選項，全部以預設值來處理。

1. 拷貝c:\tmp\DataTables-1.8.2\examples\basic_init\zero_config.html為full_numbers.html，再編輯full_numbers.html就能自行做測試。將第16行修改如下：

 
        $('#example').dataTable({ "sPaginationType":"full_numbers","bPaginate":true,
      "oLanguage": {
        "sLengthMenu": "顯示 _MENU_ 筆記錄",
        "sZeroRecords": "無符合資料",
        "sInfo": "目前記錄：_START_ 至 _END_, 總筆數：_TOTAL_",
    }});

瀏覽結果如下：

＃＃

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

• FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
• 用jQuery.formError取代alert( ) (0則留言, 2016/11/21)
• 在Xuite測試 jQuery (0則留言, 2007/09/12)
• [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
• 替部落格的側邊欄位加上縮起與展開功能 (2則留言, 2007/03/18)
• [WordPress外掛] 利用TablePress強化HTML表格控制 (0則留言, 2014/05/26)
• [jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
• jQuery選擇器測試與範例 (0則留言, 2007/09/29)
• jQuery神奇的選擇器(Selector) (3則留言, 2007/09/28)
• 第一個jqGrid範例：Local array (1則留言, 2010/02/13)
• 使用jQuery的效益 (0則留言, 2007/09/23)
• 第2個jqGrid範例：增加額外選項設定 (6則留言, 2010/02/13)
• jQuery TreeView插件IE異常解決方法 (0則留言, 2007/11/13)
• 第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
• 第3個jqGrid範例: XML與XML STRING格式 (2則留言, 2010/02/14)