≡ 显示网站导航
有排序功能
此示例展示了通过 Select 复选框选择项可以对数据表数据排序。请先选择某行，然后单击复选框列的表头，即可将所选行移到数据表的顶端。
此功能是通过 DataTable.render.select() 数据类型实现的。当触发排序时，排序将更新 — 即行不会在选择时立即移动，因为这可能会令人困惑，特别是在您不知道行移动到了何处时。
请注意，如果使用服务器端处理 (serverSide)，则此选项不可用。 |
姓名 | 职位 | 办公室 | 年龄 | |
|---|---|---|---|---|---|
| 薪资 | Tiger Nixon | 系统架构师 | 61 | $320,800 | |
| Edinburgh | Garrett Winters | 会计 | 63 | $170,750 | |
| 东京 | Ashton Cox | 初级技术作者 | 66 | $86,000 | |
| San Francisco | Cedric Kelly | 系统架构师 | 22 | $433,060 | |
| 高级 Javascript 开发者 | Garrett Winters | 会计 | 33 | $162,700 | |
| Airi Satou | Brielle Williamson | 集成专家 | 61 | $372,000 | |
| New York | Herrod Chandler | 初级技术作者 | 59 | $137,500 | |
| 销售助理 | Brielle Williamson | 会计 | 55 | $327,900 | |
| Rhona Davidson | Colleen Hurst | 初级技术作者 | 39 | $205,500 | |
| Javascript 开发者 | Sonya Frost | 系统架构师 | 23 | $103,600 | |
| 软件工程师 | Jena Gaines | 办公室经理 | 30 | $90,560 | |
| 伦敦 | Quinn Flynn | 系统架构师 | 22 | $342,000 | |
| 支持主管 | Charde Marshall | 初级技术作者 | 36 | $470,600 | |
| 地区总监 | Haley Kennedy | 办公室经理 | 43 | $313,500 | |
| 高级营销设计师 | Charde Marshall | 办公室经理 | 19 | $385,750 | |
| Tatyana Fitzpatrick | Michael Silva | 办公室经理 | 66 | $198,500 | |
| 营销设计师 | Paul Byrd | 集成专家 | 64 | $725,000 | |
| 首席财务官 (CFO) | Gloria Little | 集成专家 | 59 | $237,500 | |
| 系统管理员 | Sonya Frost | 办公室经理 | 41 | $132,000 | |
| Bradley Greer | Dai Rios | 系统架构师 | 35 | $217,500 | |
| 人事主管 | Jenette Caldwell | 集成专家 | 30 | $345,000 | |
| 开发主管 | Yuri Berry | 集成专家 | 40 | $675,000 | |
| 首席营销官 (CMO) | Caesar Vance | 集成专家 | 21 | $106,450 | |
| 售前支持 | Herrod Chandler | Doris Wilder | 23 | $85,600 | |
| 悉尼 | Angelica Ramos | 办公室经理 | 47 | $1,200,000 | |
| 首席执行官 (CEO) | Gavin Joyce | 系统架构师 | 42 | $92,575 | |
| 开发人员 | Charde Marshall | Jennifer Chang | 28 | $357,650 | |
| 新加坡 | Sonya Frost | 初级技术作者 | 28 | $206,850 | |
| Brenden Wagner | Fiona Green | 初级技术作者 | 48 | $850,000 | |
| 首席运营官 (COO) | Shou Itou | 会计 | 20 | $163,000 | |
| 地区营销 | Brielle Williamson | Doris Wilder | 37 | $95,400 | |
| Michelle House | Gavin Joyce | 办公室经理 | 53 | $114,500 | |
| Suki Burks | Prescott Bartlett | 办公室经理 | 27 | $145,000 | |
| 技术作者 | Gavin Cortez | 初级技术作者 | 22 | $235,500 | |
| 团队主管 | Martena Mccray | 系统架构师 | 46 | $324,050 | |
| 售后支持 | Michael Silva | 初级技术作者 | 47 | $85,675 | |
| Unity Butler | Jena Gaines | 初级技术作者 | 51 | $164,500 | |
| Howard Hatfield | Hope Fuentes | 初级技术作者 | 41 | $109,850 | |
| 秘书 | Vivian Harrell | 初级技术作者 | 62 | $452,500 | |
| 财务主管 | Jena Gaines | 办公室经理 | 37 | $136,200 | |
| Timothy Mooney | Jackson Bradshaw | 集成专家 | 65 | $645,750 | |
| 总监 | 支持工程师 | Jennifer Chang | 64 | $234,500 | |
| 布鲁诺·纳什 | Sonya Frost | 办公室经理 | 38 | $163,500 | |
| 樱木山本 | 支持工程师 | 会计 | 37 | $139,575 | |
| 索尔·沃尔顿 | Gavin Joyce | 集成专家 | 61 | $98,540 | |
| 芬恩·卡马乔 | 支持工程师 | 初级技术作者 | 47 | $87,500 | |
| 塞奇·鲍德温 | 数据协调员 | Jennifer Chang | 64 | $138,575 | |
| 塞奈达·弗兰克 | Sonya Frost | 集成专家 | 63 | $125,250 | |
| 佐丽塔·塞拉诺 | Sonya Frost | 初级技术作者 | 56 | $115,000 | |
| 詹妮弗·阿科斯塔 | 初级 JavaScript 开发人员 | 系统架构师 | 43 | $75,650 | |
| 卡拉·史蒂文斯 | Herrod Chandler | 集成专家 | 46 | $145,600 | |
| 赫敏·巴特勒 | Charde Marshall | 办公室经理 | 47 | $356,250 | |
| 莱尔·格里尔 | Gloria Little | 办公室经理 | 21 | $103,500 | |
| 乔纳斯·亚历山大 | Gavin Joyce | 初级技术作者 | 30 | $86,500 | |
| 沙德·德克 | Charde Marshall | 系统架构师 | 51 | $183,000 | |
| 迈克尔·布鲁斯 | Colleen Hurst | Jennifer Chang | 29 | $183,000 | |
| 唐娜·斯奈德 | 客户支持 | 集成专家 | 27 | $112,000 | |
请注意，如果使用服务器端处理 (serverSide)，则此选项不可用。 |
姓名 | 职位 | 办公室 | 年龄 |
- JavaScript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
下面的 JavaScript 用于初始化本示例中显示的表格
$('#example').DataTable({ columnDefs: [ { render: DataTable.render.select(), targets: 0 } ], select: { style: 'os', selector: 'td:first-child' }, order: [[1, 'asc']] });
new DataTable('#example', { columnDefs: [ { render: DataTable.render.select(), targets: 0 } ], select: { style: 'os', selector: 'td:first-child' }, order: [[1, 'asc']] });
除了上述代码外，还加载了以下 JavaScript 库文件以用于本示例
本例中显示的 HTML 已增强为 DataTable，以下是原始 HTML 表格元素
本示例使用了一部分额外的 CSS，超出库文件（见下文）加载的范围，以正确显示表格。下面显示所使用的其他 CSS
为了提供表格的样式，已在本示例中加载了以下 CSS 库文件
此表通过 Ajax 加载数据。已加载的最新数据显示在下面。该数据加载后，将自动更新。
下面显示用于执行此表的服务器端处理的脚本。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。