HTML5 data-* 正交数据

此示例演示了 ColReorder 与 DataTables 的 HTML5 正交数据协同工作的能力，它允许为不同的选项（如显示、排序和搜索）使用不同的数据。

姓名	职位	办公室	年龄	开始日期	薪资
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({ colReorder: true });

new DataTable('#example', { colReorder: true });

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

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

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

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

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

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

HTML5 data-* 正交数据

其他示例

初始化和选项

与其他 DataTables 扩展集成

样式

DataTables