API 插件方法
DataTables API 被设计为完全可扩展的，使用 DataTable.Api.register 函数很容易添加自定义函数。此函数带有两个参数；第一个参数是将被添加的方法的名称及其链接层次，第二个参数是函数本身。
此示例显示了如何轻松地将 sum() 方法添加到 API 中，这样你可以在一行内获得某一列的总和：table.column().data().sum()。由于方法的链接，这允许 sum() 非常容易地提供所选列的总和，并且仅将总和限制于当前页、经过筛选的数据或所有页。这是使用 column() 方法的选项及其选择项来实现此操作的。
有关 API 插件的更多信息；请参阅 插件开发文档 以创建它们及其要求。
| 姓名 | 职位 | 办公室 | 年龄 | 入职日期 | 薪资 |
|---|---|---|---|---|---|
| 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 |
| 卡拉·史蒂文斯 | 销售助理 | 纽约 | 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 | // 用 DataTables 注册一个 `sum` API 方法 DataTable.Api.register('column().data().sum()', function () { return this.reduce(function (a, b) { var x = parseFloat(a) || 0; var y = parseFloat(b) || 0; return x + y; }); }); // 初始化表格并调用取得隐藏节点。 var table = $('#example').DataTable(); $('#sum-all').on('click', function () { let text = 'Column sum is: ' + table.column(3).data().sum(); $('#demo-output').append($('<div>').text(text)); }); $('#sum-visible').on('click', function () { let text = 'Column sum is: ' + table.column(3, { page: 'current' }).data().sum(); $('#demo-output').append($('<div>').text(text)); }); |
1 | // 为了演示，向输出框添加文本函数 addOutput(text) { let newEl = document.createElement('div'); newEl.textContent = text; document.querySelector('#demo-output').prepend(newEl); } // 用 DataTables 注册一个 `sum` API 方法 DataTable.Api.register('column().data().sum()', function () { return this.reduce(function (a, b) { let x = parseFloat(a) || 0; let y = parseFloat(b) || 0; return x + y; }); }); // 初始化表格并调用取得隐藏节点。 const table = new DataTable('#example'); document.querySelector('#sum-all').addEventListener('click', function () { addOutput('Column sum is: ' + table.column(3).data().sum()); }); document.querySelector('#sum-visible').addEventListener('click', function () { addOutput( 'Column sum is: ' + table.column(3, { page: 'current' }).data().sum() ); }); |
除了以上代码外，为了使用此示例，以下 JavaScript 库文件已加载
以下所示的 HTML 是 DataTables 增强过之前的原始的 HTML 表格元素
为了正确显示表格，此示例使用一点额外的 CSS，不仅来自于库文件（如下所示），还包括使用过此额外 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.