数据呈现
DataTables 中的数据可轻松呈现，为表格添加图形或颜色，如本页示例中所示。这些示例利用 columns.render 以三种方式自定义单元格
- 为 Office 列添加标记
- 为 Progress 列添加 HTML5 进度条
- 并使用内置数字呈现器格式化 Salary。
请参阅 数据呈现手册页 了解更多有关如何使用数据呈现器的信息。此外，此示例使用 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.net.cn'; 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', // world-flags-sprite 库使用 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.net.cn'; 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', // world-flags-sprite 库使用 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 表格元素，它尚未利用 DataTables 增强
此示例使用一些额外的 CSS，这是由库文件载入之外的（如下所示），用于正确显示表格。下方显示使用的是附加 CSS
.f32 .flag { vertical-align: middle; margin: -8px 0; } progress { width: 100%; }
此示例中载入以下 CSS 库文件供使用，来提供表格样式
此表格通过 Ajax 载入数据。下方显示载入的最新数据。此数据将随着任何附加数据的载入而自动更新。
用于为此表格执行服务器端处理的脚本下方显示。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以利用任何语言编写，使用 DataTables 文档中描述的 协议。