DataTables示例 jQuery UI ThemeRoller

DataTables能够与几乎所有样式库无缝集成和集成 提供了一些流行样式库的文件,包括 jQuery UI.

要使表格样式与jQuery UI的ThemeRoller样式集成,只需添加 jQuery UI的DataTables 的CSS 和JS集成文件,如本示例所示。另请注意,因为 jQuery不像其他CSS框架那样提供表样式,CSS集成文件确实添加了 此样式信息。

请注意,DataTables 1.10-实际上具有对jQuery UI样式集成的内置支持。 through the jQueryUIDT 选项。但是,此选项是 DataTables 1.10中已弃用,并将删除DataTables 1.11,与样式集成的方式匹配 提供给其他库-一种更具模块化,可维护性和可扩展性的方法。提出的方法 此页面上的方法是将来将要使用的方法。

名称 位置 办公室 年龄 开始日期 薪水
名称 位置 办公室 年龄 开始日期 薪水
老虎·尼克松 系统架构师 爱丁堡 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() { $('#example').dataTable(); } );

除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:

下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:

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

加载以下CSS库文件以供本示例使用,以提供 table:

该表通过Ajax加载数据。下面显示了已加载的最新数据。这个数据 将在加载任何其他数据时自动更新。

下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.