DataTables示例 嵌套对象数据(对象)

DataTables可以通过以下方式使用来自几乎数据JSON数据源的数据: columns.dataDT 选项。在最简单的情况下, 它可以用于读取任意对象属性,但也可以扩展为 n 的水平 通过使用标准的Java虚线对象表示法来嵌套对象/数组。每个点 (.) in the columns.dataDT 选项代表 另一个对象级别。

In this example hr.position refers to the position property of the hr object in the row's data source object, while contact.0 refers to the first element of the contact array. Any number of dots can be used to obtain deeply nested data.

下面的示例显示DataTables从嵌套对象和列中读取列的信息 数组,在此示例中行数据源的结构为:

{
	"name": "Tiger Nixon",
	"hr": {
		"position": "System Architect",
		"salary": "$3,120",
		"start_date": "2011/04/25"
	},
	"contact": [
		"Edinburgh",
		"5421"
	]
}

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

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

$(document).ready(function() { $('#example').dataTable( { "processing": true, "ajax": "data/objects_deep.txt", "columns": [ { "data": "name" }, { "data": "hr.position" }, { "data": "contact.0" }, { "data": "contact.1" }, { "data": "hr.start_date" }, { "data": "hr.salary" } ] } ); } );

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

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

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

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

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

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