DataTables示例 的HTML5 data- *属性

数据表可以将不同的数据用于不同的操作(显示,排序和搜索),从而可以 具有强大的功能,可以转换显示中的数据,以使最终用户直观了解,而 使用其他或更复杂的数据进行其他操作。例如,如果表包含格式化的 telephone number in the format xxx-xxxx, intuitively a user might search for the number 但没有破折号。使用正交数据进行搜索可以同时使用两种形式的电话号码 使用,而表格中仅显示格式正确的数字。

DataTables可以针对其不同操作获取此正交数据的一种方法是通过 自定义HTML5数据属性。 DataTables会自动检测到 HTML elements:

  • data-sort or data-order - for ordering data
  • data-filter or data-search - for search data

This example shows the use of data-sortdata-filter attributes. In 在这种情况下,第一列已格式化,因此名字缩写了,但是全名是 仍可搜索(例如搜索“ Bruno”)。此外,尽管最后一列包含 non-numeric data in it (/y) the column will correctly order numerically as the data-sort / data-order attribute is set on the column with plain numeric data.

名称 位置 办公室 年龄 开始日期 薪水
名称 位置 办公室 年龄 开始日期 薪水
尼克松 系统架构师 爱丁堡 61 2011年4月25日星期一 $ 320,800 /年
G.温特斯 会计 东京 63 7月25日星期一 $ 170,750 /年
考克斯 初级技术作者 旧金山 66 2009年1月12日星期一 $ 86,000 /年
C.凯利 高级JavaScript开发人员 爱丁堡 22 2012年3月29日,星期四 $ 433,060 /年
佐藤 会计 东京 33 08年11月28日星期五 $ 162,700 /年
威廉森 整合专家 纽约 61 12月2日,星期日 $ 372,000 /年
钱德勒 销售助理 旧金山 59 12月8日,星期一 $ 137,500 /年
戴维森 整合专家 东京 55 10月10日14日 $ 327,900 /年
赫斯特 JavaScript开发人员 旧金山 39 2009年9月15日,星期二 $ 205,500 /年
弗罗斯特 软件工程师 爱丁堡 23 2008年12月13日,星期六 $ 103,600 /年
盖恩斯 办公室主管 伦敦 30 08年12月19日星期五 $ 90,560 /年
弗林 支持主管 爱丁堡 22 3月3日,星期日 $ 342,000 /年
马歇尔 区域总监 旧金山 36 2008年10月16日,星期四 $ 470,600 /年
肯尼迪 高级营销设计师 伦敦 43 12月18日,星期二 $ 313,500 /年
菲茨帕特里克 区域总监 伦敦 19 2010年3月17日,星期三 $ 385,750 /年
西尔瓦 营销设计师 伦敦 66 2012年11月27日,星期二 $ 198,500 /年
P·伯德 首席财务官(CFO) 纽约 64 2010年6月9日,星期三 $ 725,000 /年
G.小 系统管理员 纽约 59 09年4月10日星期五 $ 237,500 /年
格里尔 软件工程师 伦敦 41 2012年10月13日,星期六 $ 132,000 /年
D.里奥斯 人事主管 爱丁堡 35 2012年9月26日,星期三 $ 217,500 /年
J·考德威尔 开发主管 纽约 30 2011年9月3日,星期六 $ 345,000 /年
Y.贝里 首席营销官(CMO) 纽约 40 09年6月25日星期四 $ 675,000 /年
C.万斯 售前支持 纽约 21 11月12日,星期一 $ 106,450 /年
D.怀尔德 销售助理 西德尼 23 2010年9月20日星期一 $ 85,600 /年
A.拉莫斯 首席执行官(CEO) 伦敦 47 2009年10月9日,星期五 $ 1,200,000 /年
乔伊斯 开发者 爱丁堡 42 2010年12月22日,星期三 $ 92,575 /年
张杰 区域总监 新加坡 28 10月14日,星期日 $ 357,650 /年
瓦格纳 软件工程师 旧金山 28 2011年6月7日,星期二 $ 206,850 /年
F.格林 首席运营官(COO) 旧金山 48 2010年3月11日,星期四 $ 850,000 /年
伊豆 区域行销 东京 20 2011年8月14日,星期日 $ 163,000 /年
M.豪斯 整合专家 西德尼 37 2011年6月2日星期四 $ 95,400 /年
伯克斯 开发者 伦敦 53 2009年10月22日,星期四 $ 114,500 /年
巴特利特 技术作者 伦敦 27 5月7日,星期六 $ 145,000 /年
G.科尔特斯 队长 旧金山 22 星期日08年10月26日 $ 235,500 /年
麦克莱 售后支持 爱丁堡 46 3月9日,星期三 $ 324,050 /年
U.巴特勒 营销设计师 旧金山 47 2009年12月9日,星期三 $ 85,675 /年
哈特菲尔德 办公室主管 旧金山 51 2008年12月16日,星期二 $ 164,500 /年
富恩特斯 秘书 旧金山 41 2010年2月12日,星期五 $ 109,850 /年
V.哈雷尔 财务总监 旧金山 62 2009年2月14日,星期六 $ 452,500 /年
穆尼 办公室主管 伦敦 37 2008年12月11日,星期四 $ 136,200 /年
布拉德肖 导向器 纽约 65 08年9月26日星期五 $ 645,750 /年
O.梁 支援工程师 新加坡 64 2011年2月3日,星期四 $ 234,500 /年
纳什 软件工程师 伦敦 38 5月3日,星期二 $ 163,500 /年
山本南 支援工程师 东京 37 2009年8月19日,星期三 $ 139,575 /年
沃尔顿 开发者 纽约 61 13年8月11日,星期日 $ 98,540 /年
卡马乔 支援工程师 旧金山 47 2009年7月7日,星期二 $ 87,500 /年
鲍德温 数据协调员 新加坡 64 2012年4月9日星期一 $ 138,575 /年
Z.弗兰克 软件工程师 纽约 63 10月1日,星期一 $ 125,250 /年
Z.塞拉诺 软件工程师 旧金山 56 12月6日,星期五 $ 115,000 /年
J·阿科斯塔 初级Java语言开发人员 爱丁堡 43 13年2月1日,星期五 $ 75,650 /年
史蒂文斯 销售助理 纽约 46 2011年12月6日,星期二 $ 145,600 /年
H·巴特勒 区域总监 伦敦 47 3月11日星期一 $ 356,250 /年
格里尔 系统管理员 伦敦 21 09年2月27日,星期五 $ 103,500 /年
亚历山大 开发者 旧金山 30 2010年7月14日星期三 $ 86,500 /年
戴克 区域总监 爱丁堡 51 2008年11月13日,星期四 $ 183,000 /年
布鲁斯 JavaScript开发人员 新加坡 29 11月6日,星期一 $ 183,000 /年
斯奈德 客户支持 纽约 27 1月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文档.