DataTables示例 正交数据

为了使生活更轻松,默认情况下,DataTables希望将数组用作以下项的数据源: 表中的行。但是,这并不总是有用的,您可能希望DataTables使用对象 作为每一行的数据源(即每一行都有其数据由对象描述),这可以使 使用数据更容易理解,特别是如果您使用的是API而您没有 需要跟踪数组索引。

您可以使用 columns.dataDT 您用来告诉的选项 DataTables从数据源对象的每个列使用哪个属性。

在此示例中,Ajax源返回一个对象数组,DataTables用于显示对象数组。 表。在此示例中,行的数据源的结构为:

{
	"name":	   "Tiger Nixon",
	"position":   "System Architect",
	"salary":	 "$3,120",
	"start_date": {
		"display": "Mon 25th Apr 11",
		"timestamp": "1303682400"
	},
	"office":	 "Edinburgh",
	"extn":	   "5421"
}

名称 位置 办公室 扩展 开始日期 薪水
名称 位置 办公室 扩展 开始日期 薪水

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

$(document).ready(function() { $('#example').dataTable( { ajax: "data/orthogonal.txt", columns: [ { data: "name" }, { data: "position" }, { data: "office" }, { data: "extn" }, { data: { _: "start_date.display", sort: "start_date.timestamp" } }, { data: "salary" } ] } ); } );

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

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

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

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

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

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