禁用表头复选框

复选框列类型将自动为该列在表头单元格中插入一个复选框,其中会显示表格中所有行的选中状态摘要,以及向最终用户提供一种方法来快速选择/取消选择当前页面或表格中所有行,具体取决于该值。

可以使用 select.headerCheckbox 选项禁用该复选框。这在启用服务器端处理时特别有用,因为实际执行全部选择操作只会选择当前页面的行。默认情况下启用表头复选框,因此此示例演示如何禁用它。

姓名 职位 办公室 年龄 薪水
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
奥利维亚·良 支持工程师 新加坡 64 $234,500
布鲁诺·纳什 软件工程师 伦敦 38 $163,500
樱花·山本 支持工程师 东京 37 $139,575
索尔·沃尔顿 开发者 纽约 61 $98,540
芬恩·卡马乔 支持工程师 旧金山 47 $87,500
塞奇·鲍德温 数据协调员 新加坡 64 $138,575
泽奈达·弗兰克 软件工程师 纽约 63 $125,250
索丽塔·塞拉诺 软件工程师 旧金山 56 $115,000
詹妮弗·阿科斯塔 初级 Javascript 开发人员 爱丁堡 43 $75,650
卡拉·史蒂文斯 销售助理 纽约 46 $145,600
赫敏·巴特勒 区域总监 伦敦 47 $356,250
莱尔·格里尔 系统管理员 伦敦 21 $103,500
乔纳斯·亚历山大 开发者 旧金山 30 $86,500
夏德·德克尔 区域总监 爱丁堡 51 $183,000
迈克尔·布鲁斯 JavaScript 开发者 新加坡 29 $183,000
唐娜·斯奈德 客户支持 纽约 27 $112,000
姓名 职位 办公室 年龄 薪水
  • Javascript
  • HTML
  • CSS
  • Ajax
  • 服务器端脚本
  • 评论

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

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

除以上代码外,还加载以下 Javascript 库文件以用于此示例

    下面显示的 HTML 是原始 HTML 表格元素,它尚未经过 DataTables 的增强

    此示例用到库文件加载之外的少量额外 CSS(如下),以便正确显示表格。使用的额外 CSS 如下所示

    加载以下 CSS 库文件以用于此示例,为表格提供样式

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

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

      其他示例