DataTables示例 嵌套对象集结号游戏(数组)

从Ajax集结号游戏源读取的信息可以是任意复杂的,但仍然可以通过以下方式显示 通过DataTables columns.dataDT 选项,这是 对于使用已定义格式的JSON提要特别有用。

columns.dataDT 选项有能力 使用与对象相同的点对象语法,不仅从对象中读取信息,还从数组中读取信息 对象。除此之外,在使用数组集结号游戏源时 columns.dataDT 可以处理集结号游戏到 合并并以简单形式显示集结号游戏(可以使用定义更复杂的形式 columns.dataDT 作为一个功能)。

此示例显示了使用的两个不同方面 columns.dataDT 读取数组:

  • 名称 列源自两个元素(名字和姓氏)的数组,其中 会自动串联在一起。这是通过使用数组括号语法和 characters between the brackets being used as the glue between 元素 (e.g. name[, ]).
  • 位置 , 开始日期 薪水 列直接从中读取 array 元素 using dotted object notation (e.g. hr.0). Note that the order in which 可以在列中使用的集结号游戏不必与在列中定义的顺序匹配 集结号游戏源。在此示例中,行的集结号游戏源的结构为:
{
	"name": [
		"Nixon",
		"Tiger"
	],
	"hr": [
		"System Architect",
		"$3,120",
		"2011/04/25"
	],
	"office": "Edinburgh",
	"extn": "5421"
}

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

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

$(document).ready(function() { $('#example').dataTable( { "ajax": "data/objects_subarrays.txt", "columns": [ { "data": "name[, ]" }, { "data": "hr.0" }, { "data": "office" }, { "data": "extn" }, { "data": "hr.2" }, { "data": "hr.1" } ] } ); } );

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

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

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

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

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

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