DataTables会触发许多自定义事件,您可以使用标准jQuery方式将其绑定到
(尽管请注意,名称空间 dt
必须 使用),让您的代码执行
这些事件发生时的自定义操作。
All custom events fired by DataTables are fired with the namespace dt
in order to
防止与也会触发事件的其他jQuery插件产生冲突。数据表 on()DT
方法可以像jQuery一样使用
on()
method, but will automatically append the dt
namespace if required.
此示例说明了 orderDT
, searchDT
和 pageDT
通过添加事件触发的通知来触发事件
到页面上的一个元素,以表明他们确实被解雇了。
名称 | 位置 | 办公室 | 年龄 | 开始日期 | 薪水 |
---|---|---|---|---|---|
名称 | 位置 | 办公室 | 年龄 | 开始日期 | 薪水 |
老虎·尼克松 | 系统架构师 | 爱丁堡 | 61 | 2011/04/25 | $ 320,800 |
加勒特·温特斯 | 会计 | 东京 | 63 | 2011/07/25 | $ 170,750 |
阿什顿·考克斯(Ashton Cox) | 初级技术作者 | 旧金山 | 66 | 2009/01/12 | $ 86,000 |
塞德里克·凯利 | 高级JavaScript开发人员 | 爱丁堡 | 22 | 2012/03/29 | $ 433,060 |
沙里爱里 | 会计 | 东京 | 33 | 2008/11/28 | $ 162,700 |
布里埃尔·威廉姆森(Brielle Williamson) | 整合专家 | 纽约 | 61 | 2012/12/02 | $ 372,000 |
赫罗德·钱德勒 | 销售助理 | 旧金山 | 59 | 2012/08/06 | $ 137,500 |
罗娜·戴维森 | 整合专家 | 东京 | 55 | 2010/10/14 | $ 327,900 |
科琳·赫斯特(Colleen Hurst) | JavaScript开发人员 | 旧金山 | 39 | 2009/09/15 | $ 205,500 |
索尼娅·弗罗斯特 | 软件工程师 | 爱丁堡 | 23 | 2008/12/13 | $ 103,600 |
耶拿·盖恩斯(Jena Gaines) | 办公室主管 | 伦敦 | 30 | 2008/12/19 | $ 90,560 |
奎因·弗林(Quinn Flynn) | 支持主管 | 爱丁堡 | 22 | 2013/03/03 | $ 342,000 |
查德·马歇尔 | 区域总监 | 旧金山 | 36 | 2008/10/16 | $ 470,600 |
海莉·肯尼迪(Haley Kennedy) | 高级营销设计师 | 伦敦 | 43 | 2012/12/18 | $ 313,500 |
塔蒂亚娜·菲茨帕特里克(Tatyana Fitzpatrick) | 区域总监 | 伦敦 | 19 | 2010/03/17 | $ 385,750 |
迈克尔·席尔瓦 | 营销设计师 | 伦敦 | 66 | 2012/11/27 | $ 198,500 |
保罗·伯德 | 首席财务官(CFO) | 纽约 | 64 | 2010/06/09 | $ 725,000 |
Gloria Little | 系统管理员 | 纽约 | 59 | 2009/04/10 | $ 237,500 |
布拉德利·格里尔 | 软件工程师 | 伦敦 | 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 |
多丽丝·怀尔德(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 |
张珍妮 | 区域总监 | 新加坡 | 28 | 2010/11/14 | $ 357,650 |
布伦登·瓦格纳 | 软件工程师 | 旧金山 | 28 | 2011/06/07 | $ 206,850 |
菲奥娜·格林(Fiona Green) | 首席运营官(COO) | 旧金山 | 48 | 2010/03/11 | $ 850,000 |
寿头 | 区域行销 | 东京 | 20 | 2011/08/14 | $ 163,000 |
米歇尔之家 | 整合专家 | 西德尼 | 37 | 2011/06/02 | $ 95,400 |
苏基·伯克斯(Suki Burks) | 开发者 | 伦敦 | 53 | 2009/10/22 | $ 114,500 |
普雷斯科特·巴特利特 | 技术作者 | 伦敦 | 27 | 2011/05/07 | $ 145,000 |
加文·科尔特斯(Gavin Cortez) | 队长 | 旧金山 | 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 |
薇薇安·哈瑞尔(Vivian Harrell) | 财务总监 | 旧金山 | 62 | 2009/02/14 | $ 452,500 |
蒂莫西·穆尼(Timothy Mooney) | 办公室主管 | 伦敦 | 37 | 2008/12/11 | $ 136,200 |
杰克逊·布拉德肖 | 导向器 | 纽约 | 65 | 2008/09/26 | $ 645,750 |
梁静茹 | 支援工程师 | 新加坡 | 64 | 2011/02/03 | $ 234,500 |
布鲁诺·纳什(Bruno Nash) | 软件工程师 | 伦敦 | 38 | 2011/05/03 | $ 163,500 |
山本樱 | 支援工程师 | 东京 | 37 | 2009/08/19 | $ 139,575 |
雷神沃尔顿 | 开发者 | 纽约 | 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) | 初级Java语言开发人员 | 爱丁堡 | 43 | 2013/02/01 | $ 75,650 |
卡拉·史蒂文斯(Cara Stevens) | 销售助理 | 纽约 | 46 | 2011/12/06 | $ 145,600 |
赫敏·巴特勒 | 区域总监 | 伦敦 | 47 | 2011/03/21 | $ 356,250 |
莱尔·格里尔 | 系统管理员 | 伦敦 | 21 | 2009/02/27 | $ 103,500 |
乔纳斯·亚历山大(Jonas Alexander) | 开发者 | 旧金山 | 30 | 2010/07/14 | $ 86,500 |
Shad Decker | 区域总监 | 爱丁堡 | 51 | 2008/11/13 | $ 183,000 |
迈克尔·布鲁斯 | JavaScript开发人员 | 新加坡 | 29 | 2011/06/27 | $ 183,000 |
唐娜·斯尼德 | 客户支持 | 纽约 | 27 | 2011/01/25 | $ 112,000 |
下面显示的Javascript用于初始化此显示的表 example:
$(document).ready(function() {
var eventFired = function ( type ) {
var n = $('#demo_info')[0];
n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>';
n.scrollTop = n.scrollHeight;
}
$('#example')
.on( 'order.dt', function () { eventFired( 'Order' ); } )
.on( 'search.dt', function () { eventFired( 'Search' ); } )
.on( 'page.dt', function () { eventFired( 'Page' ); } )
.dataTable();
} );
除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:
下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:
除了从库中加载的内容外,此示例还使用了一些其他CSS 文件(如下),以便正确显示表格。显示了使用的其他CSS below:
加载以下CSS库文件以供本示例使用,以提供 table:
该表通过Ajax加载数据。下面显示了已加载的最新数据。这个数据 将在加载任何其他数据时自动更新。
下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.