DataTable基本使用

  1. DataTable的官網:https://datatables.net/,CDN:https://cdn.datatables.net/
  2. 下載完整範例:datatable_sample
  3. 引用CSS檔:<link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css”>
  4. 先引用JQuery檔:<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
  5. 再引用JS檔:<script src=”https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js”></script>
  6. 建立表格,指定表格id(範例:table_id),結構:<thead></thead>之間為欄位名,<tbody></tbody>之間為各列內容。
  7. 範例表格:
    <table id=”table_id” class=”display”>
    <thead>
    <tr>
    <th>欄位名稱1</th>
    <th>欄位名稱2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>第1行第1列</td>
    <td>第1行第2列</td>
    </tr>
    <tr>
    <td>第2行第1列</td>
    <td>第2行第2列</td>
    </tr>
    </tbody>
    </table>
  8. 設定datatable參數,oLanguage:語言檔路徑、sPaginationType:分頁的形式、order:資料排序依據
  9. 語言檔下載:dataTables.zh-tw,要注意語言檔路徑,若未讀到語言檔,則會顯示預設語言(英文)。
  10. datatable參數範例:
    var opt={
    “oLanguage”:{“sUrl”:”dataTables.zh-tw.txt”},
    “sPaginationType”:”full_numbers”,
    “order”: [[ 0, ‘asc’ ]]
    };
  11. 呼叫datatable:$(‘#table_id‘).DataTable(opt);
  12. 結果:

發佈留言