传统(v1 兼容性)

在 Select 2 之前可以选择复选框,但是它使用 CSS 创建视觉显示的复选框,而不是真实的 input 元素,这在 Select 2 中成为可能

为了实现向后兼容性,Select 2 中仍可以使用旧的复选框样式,如本示例所示。通过将类 select-checkbox 分配给目标列来实现。

强烈建议您在新项目中使用 新的复选框 方法,因为它改进了键盘可访问性。

姓名 职位 办公室 年龄 工资
Tiger Nixon 系统架构师 爱丁堡 61 $320,800
Garrett Winters 会计师 东京 63 $170,750
Ashton Cox 初级技术作者 旧金山 66 $86,000
Cedric Kelly 高级 JavaScript 开发者 爱丁堡 22 $433,060
Airi Satou 会计师 东京 33 $162,700
Brielle Williamson 集成专家 纽约 61 $372,000
Herrod Chandler 销售助理 旧金山 59 $137,500
Rhona Davidson 集成专家 东京 55 $327,900
Colleen Hurst JavaScript 开发者 旧金山 39 $205,500
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
Tatyana Fitzpatrick 区域总监 伦敦 19 $385,750
Michael Silva 营销设计师 伦敦 66 $198,500
Paul Byrd 首席财务官 (CFO) 纽约 64 $725,000
Gloria Little 系统管理员 纽约 59 $237,500
Bradley Greer 软件工程师 伦敦 41 $132,000
Dai Rios 人事主管 爱丁堡 35 $217,500
Jenette Caldwell 开发主管 纽约 30 $345,000
Yuri Berry 首席营销官 (CMO) 纽约 40 $675,000
Caesar Vance 售前支持 纽约 21 $106,450
Doris Wilder 销售助理 悉尼 23 $85,600
Angelica Ramos 首席执行官 (CEO) 伦敦 47 $1,200,000
Gavin Joyce 开发人员 爱丁堡 42 $92,575
Jennifer Chang 区域总监 新加坡 28 $357,650
Brenden Wagner 软件工程师 旧金山 28 $206,850
Fiona Green 首席运营官 (COO) 旧金山 48 $850,000
Shou Itou 地区营销 东京 20 $163,000
Michelle House 集成专家 悉尼 37 $95,400
Suki Burks 开发人员 伦敦 53 $114,500
Prescott Bartlett 技术作者 伦敦 27 $145,000
Gavin Cortez 团队负责人 旧金山 22 $235,500
Martena Mccray 售后支持 爱丁堡 46 $324,050
Unity Butler 营销设计师 旧金山 47 $85,675
Howard Hatfield 办公室经理 旧金山 51 $164,500
Hope Fuentes 秘书 旧金山 41 $109,850
Vivian Harrell 财务主管 旧金山 62 $452,500
Timothy Mooney 办公室经理 伦敦 37 $136,200
Jackson Bradshaw 总监 纽约 65 $645,750
Olivia Liang 支持工程师 新加坡 64 $234,500
Bruno Nash 软件工程师 伦敦 38 $163,500
Sakura Yamamoto 支持工程师 东京 37 $139,575
Thor Walton 开发人员 纽约 61 $98,540
Finn Camacho 支持工程师 旧金山 47 $87,500
Serge Baldwin 数据协调员 新加坡 64 $138,575
Zenaida Frank 软件工程师 纽约 63 $125,250
Zorita Serrano 软件工程师 旧金山 56 $115,000
Jennifer Acosta 初级 Javascript 开发人员 爱丁堡 43 $75,650
Cara Stevens 销售助理 纽约 46 $145,600
Hermione Butler 区域总监 伦敦 47 $356,250
Lael Greer 系统管理员 伦敦 21 $103,500
Jonas Alexander 开发人员 旧金山 30 $86,500
Shad Decker 区域总监 爱丁堡 51 $183,000
Michael Bruce JavaScript 开发者 新加坡 29 $183,000
Donna Snider 客户支持 纽约 27 $112,000
姓名 职位 办公室 年龄 工资
  • Javascript
  • HTML
  • CSS
  • Ajax
  • 服务器端脚本
  • 注释

下面所示的 Javascript 用于初始化本示例中显示的表格

$('#example').DataTable({ columnDefs: [ { orderable: false, className: 'select-checkbox', targets: 0 } ], select: { style: 'os', selector: 'td:first-child' }, order: [[1, 'asc']] });
new DataTable('#example', { columnDefs: [ { orderable: false, className: 'select-checkbox', targets: 0 } ], select: { style: 'os', selector: 'td:first-child' }, order: [[1, 'asc']] });

除了上述代码外,还加载了以下 Javascript 库文件供本示例使用

    下面显示的 HTML 为原始 HTML 表格元素,在被 DataTables 增强之前

    本示例使用了除了库文件中加载的内容之外的少量附加 CSS(如下所示),以便正确显示表格。下面显示了使用的附加 CSS

    以下 CSS 库文件已加载供本示例使用,以提供表格的样式

      此表格通过 Ajax 加载数据。下面显示了加载的最新数据。随着加载任何其他数据,此数据将自动更新。

      下面显示用于对本表格执行服务器端处理的脚本。请注意,这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写,使用 DataTables 文档中描述的协议

      其他示例