HTML5 data-* 属性 - 单元格数据

DataTables 可以为不同的操作（显示、排序和搜索）使用不同的数据，这对于转换显示中的数据以使其对最终用户直观，同时使用不同的或更复杂的数据执行其他操作而言，具有强大的功能。例如，如果表格包含格式化的电话号码，格式为 xxx-xxxx，直观地，用户可能会搜索号码，但没有连字符。使用正交数据进行搜索允许使用电话号码的两种形式，而表格中仅显示格式良好的号码。

DataTables 获取其不同操作的此正交数据的一种方法是通过自定义 HTML5 数据属性。DataTables 会自动检测 HTML 元素上的四个不同的属性

data-sort 或 data-order - 用于排序数据
data-filter 或 data-search - 用于搜索数据

此示例显示了 data-sort 和 data-filter 属性的使用。在这种情况下，第一列已格式化，因此第一个名称已缩写，但完整名称仍然可搜索（例如，搜索“Bruno”）。此外，尽管最后一列包含非数字数据，但该列将正确按数字排序，因为 data-sort / data-order 属性已设置为包含普通数字数据的列。

姓名	职位	办公地点	年龄	开始日期	薪资
T. Nixon	系统架构师	爱丁堡	61	2011年4月25日，周一	$320,800/年
G. Winters	会计	东京	63	2011年7月25日，周一	$170,750/年
A. Cox	初级技术作家	旧金山	66	2009年1月12日，周一	$86,000/年
C. Kelly	高级 Javascript 开发人员	爱丁堡	22	2012年3月29日，周四	$433,060/年
A. Satou	会计	东京	33	2008年11月28日，周五	$162,700/年
B. Williamson	集成专家	纽约	61	2012年12月2日，周日	$372,000/年
H. Chandler	销售助理	旧金山	59	2012年8月6日，周一	$137,500/年
R. Davidson	集成专家	东京	55	2010年10月14日，周四	$327,900/年
C. Hurst	Javascript 开发人员	旧金山	39	2009年9月15日，周二	$205,500/年
S. Frost	软件工程师	爱丁堡	23	2008年12月13日，周六	$103,600/年
J. Gaines	办公室经理	伦敦	30	2008年12月19日，周五	$90,560/年
Q. Flynn	支持主管	爱丁堡	22	2013年3月3日，周日	$342,000/年
C. Marshall	区域总监	旧金山	36	2008年10月16日，周四	$470,600/年
H. Kennedy	高级营销设计师	伦敦	43	2012年12月18日，周二	$313,500/年
T. Fitzpatrick	区域总监	伦敦	19	2010年3月17日，周三	$385,750/年
M. Silva	营销设计师	伦敦	66	2012年11月27日，周二	$198,500/年
P. Byrd	首席财务官（CFO）	纽约	64	2010年6月9日，周三	$725,000/年
G. Little	系统管理员	纽约	59	2009年4月10日，周五	$237,500/年
B. Greer	软件工程师	伦敦	41	2012年10月13日，周六	$132,000/年
D. Rios	人事主管	爱丁堡	35	2012年9月26日，周三	$217,500/年
J. Caldwell	开发主管	纽约	30	2011年9月3日，周六	$345,000/年
Y. Berry	首席营销官（CMO）	纽约	40	2009年6月25日，周四	$675,000/年
C. Vance	售前支持	纽约	21	2011年12月12日，周一	$106,450/年
D. Wilder	销售助理	悉尼	23	2010年9月20日，周一	$85,600/年
A. Ramos	首席执行官（CEO）	伦敦	47	2009年10月9日，周五	$1,200,000/年
G. Joyce	开发人员	爱丁堡	42	2010年12月22日，周三	$92,575/年
J. Chang	区域总监	新加坡	28	2010年11月14日，周日	$357,650/年
B. Wagner	软件工程师	旧金山	28	2011年6月7日，周二	$206,850/年
F. Green	首席运营官（COO）	旧金山	48	2010年3月11日，周四	$850,000/年
S. Itou	区域营销	东京	20	2011年8月14日，周日	$163,000/年
M. House	集成专家	悉尼	37	2011年6月2日，周四	$95,400/年
S. Burks	开发人员	伦敦	53	2009年10月22日，周四	$114,500/年
P. Bartlett	技术作家	伦敦	27	2011年5月7日，周六	$145,000/年
G. Cortez	团队领导	旧金山	22	2008年10月26日，周日	$235,500/年
M. Mccray	售后支持	爱丁堡	46	2011年3月9日，周三	$324,050/年
U. Butler	营销设计师	旧金山	47	2009年12月9日，周三	$85,675/年
H. Hatfield	办公室经理	旧金山	51	2008年12月16日，周二	$164,500/年
H. Fuentes	秘书	旧金山	41	2010年2月12日，周五	$109,850/年
V. Harrell	财务总监	旧金山	62	2009年2月14日，周六	$452,500/年
T. Mooney	办公室经理	伦敦	37	2008年12月11日，周四	$136,200/年
J. Bradshaw	总监	纽约	65	2008年9月26日，周五	$645,750/年
O. Liang	支持工程师	新加坡	64	2011年2月3日，周四	$234,500/年
B. Nash	软件工程师	伦敦	38	2011年5月3日，周二	$163,500/年
S. Yamamoto	支持工程师	东京	37	2009年8月19日，周三	$139,575/年
T. Walton	开发人员	纽约	61	2013年8月11日，周日	$98,540/年
F. Camacho	支持工程师	旧金山	47	2009年7月7日，周二	$87,500/年
S. Baldwin	数据协调员	新加坡	64	2012年4月9日，周一	$138,575/年
Z. Frank	软件工程师	纽约	63	2010年1月4日，周一	$125,250/年
Z. Serrano	软件工程师	旧金山	56	2012年6月1日，周五	$115,000/年
J. Acosta	初级 Javascript 开发人员	爱丁堡	43	2013年2月1日，周五	$75,650/年
C. Stevens	销售助理	纽约	46	2011年12月6日，周二	$145,600/年
H. Butler	区域总监	伦敦	47	2011年3月21日，周一	$356,250/年
L. Greer	系统管理员	伦敦	21	2009年2月27日，周五	$103,500/年
J. Alexander	开发人员	旧金山	30	2010年7月14日，周三	$86,500/年
S. Decker	区域总监	爱丁堡	51	2008年11月13日，周四	$183,000/年
M. Bruce	Javascript 开发人员	新加坡	29	2011年6月27日，周一	$183,000/年
D. Snider	客户支持	纽约	27	2011年1月25日，周二	$112,000/年
姓名	职位	办公地点	年龄	开始日期	薪资

Javascript
HTML
CSS
Ajax
服务器端脚本
注释

下面显示的 Javascript 用于初始化此示例中显示的表格

$('#example').DataTable();

new DataTable('#example');

除了以上代码之外，以下 Javascript 库文件也已加载以供此示例使用

下面显示的 HTML 是原始 HTML 表格元素，在 DataTables 增强它之前

此示例使用了一些超出库文件（如下）加载的内容的额外 CSS，以便正确显示表格。下面显示了使用的额外 CSS

以下 CSS 库文件已加载以供此示例使用，以提供表格的样式

此表格通过 Ajax 加载数据。已加载的最新数据显示在下面。随着任何其他数据的加载，此数据将自动更新。

用于执行此表格的服务器端处理的脚本显示在下面。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。

HTML5 data-* 属性 - 单元格数据

其他示例

基本初始化

高级初始化

数据源

语言和国际化

日期时间

插件

样式

布局

API

Ajax

服务器端

DataTables