DataTables示例 滚动-水平和垂直

在此示例中,您可以看到DataTables同时进行水平和垂直滚动 时间。还要注意的是,在此示例中启用了分页,并且为此进行了滚动说明。

名字 位置 办公室 年龄 开始日期 薪水 扩展 电子邮件
尼克松 系统架构师 爱丁堡 61 2011/04/25 $ 320,800 5421 [email protected]
加勒特 温特斯 会计 东京 63 2011/07/25 $ 170,750 8422 [email protected]
阿什顿 考克斯 初级技术作者 旧金山 66 2009/01/12 $ 86,000 1562 [email protected]
塞德里克 凯莉 高级JavaScript开发人员 爱丁堡 22 2012/03/29 $ 433,060 6224 [email protected]
艾里 佐头 会计 东京 33 2008/11/28 $ 162,700 5407 [email protected]
布里埃尔 威廉森 整合专家 纽约 61 2012/12/02 $ 372,000 4804 [email protected]
赫罗德 钱德勒 销售助理 旧金山 59 2012/08/06 $ 137,500 9608 [email protected]
罗纳 戴维森 整合专家 东京 55 2010/10/14 $ 327,900 6200 [email protected]
科琳 赫斯特 JavaScript开发人员 旧金山 39 2009/09/15 $ 205,500 2360 [email protected]
索尼娅 软件工程师 爱丁堡 23 2008/12/13 $ 103,600 1667 [email protected]
耶拿 盖恩斯 办公室主管 伦敦 30 2008/12/19 $ 90,560 3814 [email protected]
奎因 弗林 支持主管 爱丁堡 22 2013/03/03 $ 342,000 9497 [email protected]
查德 马歇尔 区域总监 旧金山 36 2008/10/16 $ 470,600 6741 [email protected]
海利 肯尼迪 高级营销设计师 伦敦 43 2012/12/18 $ 313,500 3597 [email protected]
塔季扬娜 菲茨帕特里克 区域总监 伦敦 19 2010/03/17 $ 385,750 1965 [email protected]
麦可 席尔瓦 营销设计师 伦敦 66 2012/11/27 $ 198,500 1581 [email protected]
保罗 伯德 首席财务官(CFO) 纽约 64 2010/06/09 $ 725,000 3059 [email protected]
格洛丽亚 系统管理员 纽约 59 2009/04/10 $ 237,500 1721 [email protected]
布拉德利 格里尔 软件工程师 伦敦 41 2012/10/13 $ 132,000 2558 [email protected]
里奥斯 人事主管 爱丁堡 35 2012/09/26 $ 217,500 2290 [email protected]
珍妮特 考德威尔 开发主管 纽约 30 2011/09/03 $ 345,000 1937 [email protected]
尤里 浆果 首席营销官(CMO) 纽约 40 2009/06/25 $ 675,000 6154 [email protected]
es撒 万斯 售前支持 纽约 21 2011/12/12 $ 106,450 8330 [email protected]
多丽丝 怀尔德 销售助理 西德尼 23 2010/09/20 $ 85,600 3023 [email protected]
当归 拉莫斯 首席执行官(CEO) 伦敦 47 2009/10/09 $ 1,200,000 5797 [email protected]
加文 乔伊斯 开发者 爱丁堡 42 2010/12/22 $ 92,575 8822 [email protected]
珍妮佛 区域总监 新加坡 28 2010/11/14 $ 357,650 9239 [email protected]
布伦登 瓦格纳 软件工程师 旧金山 28 2011/06/07 $ 206,850 1314 b.wagn[email protected]
菲奥娜 绿色 首席运营官(COO) 旧金山 48 2010/03/11 $ 850,000 2947 [email protected]
寿 伊藤 区域行销 东京 20 2011/08/14 $ 163,000 8899 [email protected]
蜜雪儿 整合专家 西德尼 37 2011/06/02 $ 95,400 2769 [email protected]
寿喜 伯克斯 开发者 伦敦 53 2009/10/22 $ 114,500 6832 [email protected]
普雷斯科特 巴特利特 技术作者 伦敦 27 2011/05/07 $ 145,000 3606 [email protected]
加文 科尔特斯 队长 旧金山 22 2008/10/26 $ 235,500 2860 [email protected]
马丁娜 麦克莱 售后支持 爱丁堡 46 2011/03/09 $ 324,050 8240 [email protected]
统一 巴特勒 营销设计师 旧金山 47 2009/12/09 $ 85,675 5384 [email protected]
霍华德 哈特菲尔德 办公室主管 旧金山 51 2008/12/16 $ 164,500 7031 [email protected]
希望 丰特斯 秘书 旧金山 41 2010/02/12 $ 109,850 6318 [email protected]
维维安 哈雷尔 财务总监 旧金山 62 2009/02/14 $ 452,500 9422 [email protected]
提摩太 穆尼 办公室主管 伦敦 37 2008/12/11 $ 136,200 7580 [email protected]
杰克逊 布拉德肖 导向器 纽约 65 2008/09/26 $ 645,750 1042 [email protected]
奥利维亚 支援工程师 新加坡 64 2011/02/03 $ 234,500 2120 [email protected]
布鲁诺 纳什 软件工程师 伦敦 38 2011/05/03 $ 163,500 6222 [email protected]
山本 支援工程师 东京 37 2009/08/19 $ 139,575 9383 [email protected]
雷神 沃尔顿 开发者 纽约 61 2013/08/11 $ 98,540 8327 [email protected]
芬恩 卡马乔 支援工程师 旧金山 47 2009/07/07 $ 87,500 2927 [email protected]
哔叽 鲍德温 数据协调员 新加坡 64 2012/04/09 $ 138,575 8352 [email protected]
泽奈达 坦率 软件工程师 纽约 63 2010/01/04 $ 125,250 7439 [email protected]
佐丽塔 塞拉诺 软件工程师 旧金山 56 2012/06/01 $ 115,000 4389 [email protected]
珍妮佛 阿科斯塔 初级Java语言开发人员 爱丁堡 43 2013/02/01 $ 75,650 3431 [email protected]
卡拉 史蒂文斯 销售助理 纽约 46 2011/12/06 $ 145,600 3990 [email protected]
赫敏 巴特勒 区域总监 伦敦 47 2011/03/21 $ 356,250 1016 [email protected]
莱尔 格里尔 系统管理员 伦敦 21 2009/02/27 $ 103,500 6733 [email protected]
乔纳斯 亚力山大 开发者 旧金山 30 2010/07/14 $ 86,500 8196 [email protected]
d 百得 区域总监 爱丁堡 51 2008/11/13 $ 183,000 6373 [email protected]
麦可 布鲁斯 JavaScript开发人员 新加坡 29 2011/06/27 $ 183,000 5384 [email protected]
唐娜 斯奈德 客户支持 纽约 27 2011/01/25 $ 112,000 4226 [email protected]

下面显示的Javascript用于初始化此显示的表 example:

$(document).ready(function() { $('#example').dataTable( { "scrollY": 200, "scrollX": true } ); } );

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

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

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

th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

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

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

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