DataTables示例 隐藏列

有时您可能会发现仅显示信息的子集很有用。 在原始表中可用。例如,您可能希望减少显示在屏幕上的数据量。 屏幕以使其更清晰。这是通过 columns.visibleDT 列选项。

The column that is hidden is still part of the table 和 can be made visible through the api column().visible() API method at a future time if you wish to have columns which can be shown and hidden.

此外,由于隐藏数据仍然是表的一部分,因此仍然可以选择对其进行过滤 允许用户访问该数据(例如,行条目的“标签”信息)后, used).

在下面的表格中,“ office”和“ age version”列已被隐藏,前者是 可搜索的,后者不是。

名称 位置 办公室 年龄 开始日期 薪水
名称 位置 办公室 年龄 开始日期 薪水
老虎·尼克松 系统架构师 爱丁堡 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( { "columnDefs": [ { "targets": [ 2 ], "visible": false, "searchable": false }, { "targets": [ 3 ], "visible": false } ] } ); } );

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

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

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

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

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

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