单项选择

通过 select.style 选项可以控制表格中如何选择项目。它是一个字符串,可以与以下选项之一配合使用

  • api - 选择只能通过 API 执行
  • single - 只能选择一个项目,当选择一个新项目时,将自动取消选择任何其他已选择的项目
  • multi - 可以选择多个项目。通过简单地单击要选择的项目进行选择
  • os - 操作系统 (OS) 样式选择。这是最全面的选项,并提供复杂的行为,例如按住 ctrl/cmd 单击以选择/取消选择各个项目,按住 shift 单击以选择范围,以及未经修改的单击以选择单个项目。

此示例显示了 single 选项。

姓名 职位 办公室 年龄 开始日期 薪水
泰格·尼克松 系统架构师 爱丁堡 61 2011-04-25 $320,800
加勒特·温特斯 会计师 东京 63 2011-07-25 $170,750
阿什顿·考克斯 初级技术作者 旧金山 66 2009-01-12 $86,000
塞德里克·凯利 高级 Javascript 开发人员 爱丁堡 22 2012-03-29 $433,060
艾丽·佐藤 会计师 东京 33 2008-11-28 $162,700
布里埃尔·威廉姆森 集成专家 纽约 61 2012-12-02 $372,000
赫罗德·钱德勒 销售助理 旧金山 59 2012-08-06 $137,500
罗娜·戴维森 集成专家 东京 55 2010-10-14 $327,900
科琳·赫斯特 Javascript 开发人员 旧金山 39 2009-09-15 $205,500
索尼娅·弗罗斯特 软件工程师 爱丁堡 23 2008-12-13 $103,600
耶娜·盖恩斯 办公室经理 伦敦 30 2008-12-19 $90,560
奎因·弗林 支持主管 爱丁堡 22 2013-03-03 $342,000
查德·马歇尔 区域经理 旧金山 36 2008-10-16 $470,600
海莉·肯尼迪 高级营销设计师 伦敦 43 2012-12-18 $313,500
塔季扬娜·菲茨帕特里克 区域经理 伦敦 19 2010-03-17 $385,750
迈克尔·席尔瓦 营销设计师 伦敦 66 2012-11-27 $198,500
保罗·伯德 首席财务官 (CFO) 纽约 64 2010-06-09 $725,000
格洛丽亚·利特尔 系统管理员 纽约 59 2009-04-10 $237,500
布拉德利·格里尔 软件工程师 伦敦 41 2012-10-13 $132,000
戴·里奥斯 人事主管 爱丁堡 35 2012-09-26 $217,500
珍妮特·考德威尔 开发主管 纽约 30 2011-09-03 $345,000
尤里·贝瑞 首席营销官 (CMO) 纽约 40 2009-06-25 $675,000
凯撒·万斯 售前支持 纽约 21 2011-12-12 $106,450
多丽丝·怀尔德 销售助理 悉尼 23 2010-09-20 $85,600
安吉丽卡·拉莫斯 首席执行官 (CEO) 伦敦 47 2009-10-09 $1,200,000
加文·乔伊斯 开发者 爱丁堡 42 2010-12-22 $92,575
詹妮弗·张 区域经理 新加坡 28 2010-11-14 $357,650
布伦登·瓦格纳 软件工程师 旧金山 28 2011-06-07 $206,850
菲奥娜·格林 首席运营官 (COO) 旧金山 48 2010-03-11 $850,000
伊藤寿 区域营销 东京 20 2011-08-14 $163,000
米歇尔·豪斯 集成专家 悉尼 37 2011-06-02 $95,400
苏琪·伯克斯 开发者 伦敦 53 2009-10-22 $114,500
普雷斯科特·巴特利特 技术作者 伦敦 27 2011-05-07 $145,000
加文·科尔特斯 团队领导 旧金山 22 2008-10-26 $235,500
马特娜·麦科雷 售后支持 爱丁堡 46 2011-03-09 $324,050
尤尼蒂·巴特勒 营销设计师 旧金山 47 2009-12-09 $85,675
霍华德·哈特菲尔德 办公室经理 旧金山 51 2008-12-16 $164,500
希望·富恩特斯 秘书 旧金山 41 2010-02-12 $109,850
维维安·哈雷尔 财务总监 旧金山 62 2009-02-14 $452,500
蒂莫西·穆尼 办公室经理 伦敦 37 2008-12-11 $136,200
杰克逊·布拉德肖 总监 纽约 65 2008-09-26 $645,750
奥利维亚·梁 支持工程师 新加坡 64 2011-02-03 $234,500
布鲁诺·纳什 软件工程师 伦敦 38 2011-05-03 $163,500
樱花·山本 支持工程师 东京 37 2009-08-19 $139,575
托尔·沃尔顿 开发者 纽约 61 2013-08-11 $98,540
芬·卡马乔 支持工程师 旧金山 47 2009-07-07 $87,500
塞尔日·鲍德温 数据协调员 新加坡 64 2012-04-09 $138,575
泽奈达·弗兰克 软件工程师 纽约 63 2010-01-04 $125,250
佐丽塔·塞拉诺 软件工程师 旧金山 56 2012-06-01 $115,000
詹妮弗·阿科斯塔 初级 JavaScript 开发人员 爱丁堡 43 2013-02-01 $75,650
卡拉·史蒂文斯 销售助理 纽约 46 2011-12-06 $145,600
赫敏·巴特勒 区域经理 伦敦 47 2011-03-21 $356,250
莱尔·格里尔 系统管理员 伦敦 21 2009-02-27 $103,500
乔纳斯·亚历山大 开发者 旧金山 30 2010-07-14 $86,500
谢德·德克尔 区域经理 爱丁堡 51 2008-11-13 $183,000
迈克尔·布鲁斯 Javascript 开发人员 新加坡 29 2011-06-27 $183,000
唐娜·斯奈德 客户支持 纽约 27 2011-01-25 $112,000
姓名 职位 办公室 年龄 开始日期 薪水
  • JavaScript
  • HTML
  • CSS
  • Ajax
  • 服务器端脚本
  • 注释

以下所示的 JavaScript 用于初始化此示例中显示的表格

$('#example').DataTable({ select: { style: 'single' } });
new DataTable('#example', { select: { style: 'single' } });

除了上述代码之外,还加载了以下 JavaScript 库文件以供在此示例中使用

    以下所示的 HTML 是原始的 HTML 表格元素,它尚未通过 DataTables 增强

    此示例使用了一点额外的 CSS,除了从库文件中加载的 CSS(如下所示)之外,还可以正确显示表格。下面显示了使用的其他 CSS

    在该示例中加载了以下 CSS 库文件,以为表格提供样式

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

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

      其他示例