导出标题和消息
除了 DataTables 中显示的信息外,导出按钮类型还有其他功能,具体地说,它们可以显示页面标题、表格标题或自定义消息。对于 copy
、excel
、pdf
和 print
,支持以下选项(有关如何使用这些参数的完整参考,请参见 buttons.exportInfo()
文档)
title
- 显示在导出文档的顶部messageTop
- 显示在导出文档中标题和表格之间messageBottom
- 显示在导出表格下方
请注意,CSV 导出按钮类型不支持这些选项!在 CSV 文件中包含此类元信息会使其对 CSV 查看器不可读。
本示例演示了在各种配置中使用这些选项
姓名 | 职位 | 办公室 | 年龄 | 开始日期 | 工资 |
---|---|---|---|---|---|
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 文档中所述的协议。
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.