列选择器

AutoFill 提供了确定哪些列应启用的能力,可以通过 autoFill.columns 选项实现。这将接受 column-selector 数据类型允许的任何值,例如列索引数组、类名,或者如本例所示的 jQuery 选择器。

排除 AutoFill 操作的列的能力在表格包含非数据列时特别有用。此示例使用 DataTables 的 Select 扩展 通过 select 选项允许行选择,行选择仅限于第一列。因此,我们不希望该列具有 AutoFill 功能,并且 autoFill.columns 的选择器 :not(:first-child) 实现了这一点。

将 AutoFill 与 编辑器(以及其他扩展,如 行重排键盘导航)结合使用,可以为最终用户创建一个强大的数据编辑环境。

姓名 职位 办公室 年龄 薪资
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({ autoFill: { columns: ':not(:first-child)' }, columnDefs: [ { orderable: false, className: 'select-checkbox', targets: 0 } ], order: [[1, 'asc']], select: { style: 'os', selector: 'td:first-child' } });
new DataTable('#example', { autoFill: { columns: ':not(:first-child)' }, columnDefs: [ { orderable: false, className: 'select-checkbox', targets: 0 } ], order: [[1, 'asc']], select: { style: 'os', selector: 'td:first-child' } });

除了以上代码之外,以下 Javascript 库文件也加载到此示例中使用

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

    此示例使用了一些超出库文件(如下)加载的额外 CSS,以便正确显示表格。下面显示了使用的额外 CSS

    以下 CSS 库文件加载到此示例中以提供表格的样式

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

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

      其他示例