Material Design（技术预览）
此示例展示了为 Google 的 Material Design 设计样式的 DataTables。 Material Design 库用于提供 Material 的样式实现。
这是一个技术预览示例，DataTables 的 Material Design 集成尚未完成。此技术预览旨在评估对 DataTables 的 Material 集成的兴趣，并估算完全支持样式库所需的工作量。因此，DataTables 的 Material 设计实现目前只能从源代码安装，在包管理器或 DataTables 下载器中不可用。
如果您希望看到 DataTables 的 MDL 集成的持续开发，请 联系我们，以便我们了解哪些集成很受欢迎。
| 名字 | 姓氏 | 职位 | 办公室 | 薪资 |
|---|---|---|---|---|
| Tiger | Nixon | 系统架构师 | 爱丁堡 | 320800 |
| Garrett | Winters | 会计 | 东京 | 170750 |
| Ashton | Cox | 初级技术作家 | 旧金山 | 86000 |
| Cedric | Kelly | 高级 Javascript 开发人员 | 爱丁堡 | 433060 |
| Airi | Satou | 会计 | 东京 | 162700 |
| Brielle | Williamson | 集成专家 | 纽约 | 372000 |
| Herrod | Chandler | 销售助理 | 旧金山 | 137500 |
| Rhona | Davidson | 集成专家 | 东京 | 327900 |
| Colleen | Hurst | Javascript 开发人员 | 旧金山 | 205500 |
| Sonya | Frost | 软件工程师 | 爱丁堡 | 103600 |
| Jena | Gaines | 办公室经理 | 伦敦 | 90560 |
| Quinn | Flynn | 支持主管 | 爱丁堡 | 342000 |
| Charde | Marshall | 区域总监 | 旧金山 | 470600 |
| Haley | Kennedy | 高级营销设计师 | 伦敦 | 313500 |
| Tatyana | Fitzpatrick | 区域总监 | 伦敦 | 385750 |
| Michael | Silva | 营销设计师 | 伦敦 | 198500 |
| Paul | Byrd | 首席财务官（CFO） | 纽约 | 725000 |
| Gloria | Little | 系统管理员 | 纽约 | 237500 |
| Bradley | Greer | 软件工程师 | 伦敦 | 132000 |
| Dai | Rios | 人事主管 | 爱丁堡 | 217500 |
| Jenette | Caldwell | 开发主管 | 纽约 | 345000 |
| Yuri | Berry | 首席营销官（CMO） | 纽约 | 675000 |
| Caesar | Vance | 售前支持 | 纽约 | 106450 |
| Doris | Wilder | 销售助理 | Sydney | 85600 |
| Angelica | Ramos | 首席执行官（CEO） | 伦敦 | 1200000 |
| Gavin | Joyce | 开发人员 | 爱丁堡 | 92575 |
| Jennifer | Chang | 区域总监 | 新加坡 | 357650 |
| Brenden | Wagner | 软件工程师 | 旧金山 | 206850 |
| Fiona | Green | 首席运营官（COO） | 旧金山 | 850000 |
| Shou | Itou | 区域营销 | 东京 | 163000 |
| Michelle | House | 集成专家 | Sydney | 95400 |
| Suki | Burks | 开发人员 | 伦敦 | 114500 |
| Prescott | Bartlett | 技术作家 | 伦敦 | 145000 |
| Gavin | Cortez | 团队领导 | 旧金山 | 235500 |
| Martena | Mccray | 售后支持 | 爱丁堡 | 324050 |
| Unity | Butler | 营销设计师 | 旧金山 | 85675 |
| Howard | Hatfield | 办公室经理 | 旧金山 | 164500 |
| Hope | Fuentes | 秘书 | 旧金山 | 109850 |
| Vivian | Harrell | 财务总监 | 旧金山 | 452500 |
| Timothy | Mooney | 办公室经理 | 伦敦 | 136200 |
| Jackson | Bradshaw | 总监 | 纽约 | 645750 |
| Olivia | Liang | 支持工程师 | 新加坡 | 234500 |
| Bruno | Nash | 软件工程师 | 伦敦 | 163500 |
| Sakura | Yamamoto | 支持工程师 | 东京 | 139575 |
| Thor | Walton | 开发人员 | 纽约 | 98540 |
| Finn | Camacho | 支持工程师 | 旧金山 | 87500 |
| Serge | Baldwin | 数据协调员 | 新加坡 | 138575 |
| Zenaida | Frank | 软件工程师 | 纽约 | 125250 |
| Zorita | Serrano | 软件工程师 | 旧金山 | 115000 |
| Jennifer | Acosta | 初级 Javascript 开发人员 | 爱丁堡 | 75650 |
| Cara | Stevens | 销售助理 | 纽约 | 145600 |
| Hermione | Butler | 区域总监 | 伦敦 | 356250 |
| Lael | Greer | 系统管理员 | 伦敦 | 103500 |
| Jonas | Alexander | 开发人员 | 旧金山 | 86500 |
| Shad | Decker | 区域总监 | 爱丁堡 | 183000 |
| Michael | Bruce | Javascript 开发人员 | 新加坡 | 183000 |
| Donna | Snider | 客户支持 | 纽约 | 112000 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面显示的 Javascript 用于初始化此示例中显示的表格
$('#example').DataTable();
new DataTable('#example');
除了以上代码之外，以下 Javascript 库文件也加载到此示例中使用
下面显示的 HTML 是原始的 HTML 表格元素，在 DataTables 增强之前
此示例使用了一些超出库文件（如下）加载的额外 CSS，以便正确显示表格。下面显示了使用的额外 CSS
以下 CSS 库文件加载到此示例中使用，以提供表格的样式
此表通过 Ajax 加载数据。已加载的最新数据显示如下。此数据将在加载任何其他数据时自动更新。
用于执行此表服务器端处理的脚本显示如下。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。