資料呈現
DataTables 中的資料可以輕鬆呈現，為您的表格添加圖形或色彩，如本頁範例所示。這些範例利用 columns.render 以三種方式自訂儲存格
- 在辦公室欄位中添加一個旗幟
- 在進度欄位中添加一個 HTML5 進度條
- 並使用內建的數字呈現器來格式化薪水。
請參閱資料呈現手冊頁面以取得更多關於如何使用資料呈現器的詳細資訊。此外，此範例使用 Ajax 來載入資料。更多 Ajax 範例可在此取得。
| 姓名 | 職位 | 辦公室 | 進度 | 開始日期 | 薪水 |
|---|---|---|---|---|---|
| 姓名 | 職位 | 辦公室 | 進度 | 開始日期 | 薪水 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
下方顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ ajax: '../ajax/data/objects_salary.txt', columns: [ { data: 'name' }, { data: 'position', render: function (data, type) { if (type === 'display') { let link = 'https://datatables.dev.org.tw'; if (data[0] < 'H') { link = 'https://cloudtables.com'; } else if (data[0] < 'S') { link = 'https://editor.datatables.net'; } return '<a href="' + link + '">' + data + '</a>'; } return data; } }, { className: 'f32', // used by world-flags-sprite library data: 'office', render: function (data, type) { if (type === 'display') { let country = ''; switch (data) { case 'Argentina': country = 'ar'; break; case 'Edinburgh': country = '_Scotland'; break; case 'London': country = '_England'; break; case 'New York': case 'San Francisco': country = 'us'; break; case 'Sydney': country = 'au'; break; case 'Tokyo': country = 'jp'; break; } return '<span class="flag ' + country + '"></span> ' + data; } return data; } }, { data: 'extn', render: function (data, type, row, meta) { return type === 'display' ? '<progress value="' + data + '" max="9999"></progress>' : data; } }, { data: 'start_date' }, { data: 'salary', render: function (data, type) { var number = $.fn.dataTable.render .number(',', '.', 2, '$') .display(data); if (type === 'display') { let color = 'green'; if (data < 250000) { color = 'red'; } else if (data < 500000) { color = 'orange'; } return ( '<span style="color:' + color + '">' + number + '</span>' ); } return number; } } ] });
new DataTable('#example', { ajax: '../ajax/data/objects_salary.txt', columns: [ { data: 'name' }, { data: 'position', render: function (data, type) { if (type === 'display') { let link = 'https://datatables.dev.org.tw'; if (data[0] < 'H') { link = 'https://cloudtables.com'; } else if (data[0] < 'S') { link = 'https://editor.datatables.net'; } return '<a href="' + link + '">' + data + '</a>'; } return data; } }, { className: 'f32', // used by world-flags-sprite library data: 'office', render: function (data, type) { if (type === 'display') { let country = ''; switch (data) { case 'Argentina': country = 'ar'; break; case 'Edinburgh': country = '_Scotland'; break; case 'London': country = '_England'; break; case 'New York': case 'San Francisco': country = 'us'; break; case 'Sydney': country = 'au'; break; case 'Tokyo': country = 'jp'; break; } return '<span class="flag ' + country + '"></span> ' + data; } return data; } }, { data: 'extn', render: function (data, type, row, meta) { return type === 'display' ? '<progress value="' + data + '" max="9999"></progress>' : data; } }, { data: 'start_date' }, { data: 'salary', render: function (data, type) { var number = DataTable.render .number(',', '.', 2, '$') .display(data); if (type === 'display') { let color = 'green'; if (data < 250000) { color = 'red'; } else if (data < 500000) { color = 'orange'; } return `<span style="color:${color}">${number}</span>`; } return number; } } ] });
除了上述程式碼之外，還會載入下列 Javascript 函式庫檔案以在此範例中使用
下方顯示的 HTML 是原始 HTML 表格元素，在 DataTables 增強之前
此範例使用了除函式庫檔案載入的額外 CSS (如下所示)，以便正確顯示表格。使用的額外 CSS 如下所示
.f32 .flag { vertical-align: middle; margin: -8px 0; } progress { width: 100%; }
載入下列 CSS 函式庫檔案，以在此範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。下方顯示已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
下方顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以用任何語言編寫，使用 DataTables 文件中描述的協定。