初始化:基础

Buttons 最常见的用法,也是在大多数示例中使用的用法,是使用 DataTables 的 layout 选项将按钮放置在表格周围。Buttons 创建了可与 layout 一起使用的 buttons 功能,就像 DataTables 的默认功能 infopaging 等一样。

Buttons 功能可以接受按钮数组或 buttons 配置对象。每个按钮也可以 扩展 以提供该按钮的自定义。

此示例显示了 copycsvexcelpdfprint 按钮,用于显示 DataTable 的数据导出选项。

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

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

$('#example').DataTable({ layout: { topStart: { buttons: ['copy', 'csv', 'excel', 'pdf', 'print'] } } });
new DataTable('#example', { layout: { topStart: { buttons: ['copy', 'csv', 'excel', 'pdf', 'print'] } } });

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

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

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

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

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

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

      其他示例