导出标题和消息

除了 DataTables 中显示的信息外,导出按钮类型还有其他功能,具体地说,它们可以显示页面标题、表格标题或自定义消息。对于 copyexcelpdfprint,支持以下选项(有关如何使用这些参数的完整参考,请参见 buttons.exportInfo() 文档)

  • title - 显示在导出文档的顶部
  • messageTop - 显示在导出文档中标题和表格之间
  • messageBottom - 显示在导出表格下方

请注意,CSV 导出按钮类型不支持这些选项!在 CSV 文件中包含此类元信息会使其对 CSV 查看器不可读。

本示例演示了在各种配置中使用这些选项

  • copy 使用所有默认设置(本例中标题和底部标题)
  • excel 在标题和底部标题之外显示一条顶部消息
  • pdf 仅显示标题,不显示底部标题
  • print 使用一个函数显示顶部消息以获取显示文本,但不显示底部标题。
姓名 职位 办公室 年龄 开始日期 工资
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
戴·里奥斯 人员主管 爱丁堡 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
  • 服务器端脚本
  • 注释 (0)

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

1
var printCounter = 0; $('#example').DataTable({ caption: "一家虚构公司的员工表。", layout: { topStart: { buttons: [ 'copy', { extend: 'excel', messageTop: '此表格中的信息版权归 Sirius Cybernetics Corp. 所有。' }, { extend: 'pdf', messageBottom: null }, { extend: 'print', messageTop: function () { printCounter++; if (printCounter === 1) { return '这是您第一次打印此文档。'; } else { return ( '您已打印此文档 ' + printCounter + ' 次' ); } }, messageBottom: null } ] } } });
1
var printCounter = 0; new DataTable('#example', { caption: "一家虚构公司的员工表。", layout: { topStart: { buttons: [ 'copy', { extend: 'excel', messageTop: '此表格中的信息版权归 Sirius Cybernetics Corp. 所有。' }, { extend: 'pdf', messageBottom: null }, { extend: 'print', messageTop: function () { printCounter++; if (printCounter === 1) { return '这是您第一次打印此文档。'; } else { return ( '您已打印此文档 ' + printCounter + ' 次' ); } }, messageBottom: null } ] } } });

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

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

    此示例使用了除库文件加载的内容外的一些其他 CSS(如下),以便正确显示表格。以下显示使用的其他 CSS

    1
     

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

      此表格通过 Ajax 加载数据。以下是加载的最新数据。此数据将随着任何其他数据的加载自动更新。

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

      No comments posted for this page yet. Be the first to contribute!

      Post new comment

      Contributions in the form of tips, code snippets and suggestions for the above material are very welcome. To post a comment, please use the form below. Text is formatted by Markdown.

      To post comments, please sign in to your DataTables account, or register:

      Any questions posted here will be deleted without being published.
      Please post questions in the Forums. Comments are moderated.

      其他示例