如何从 DataTables 中的嵌套对象读取信息？

DataTables是一个现代 jQuery 插件，用于向网页的 HTML 表格添加交互式和高级控件。它是一个非常易于使用的插件，具有多种选项供开发人员根据应用程序需要进行自定义更改。该插件的功能包括分页、排序、搜索和多列排序。

在本文中，我们将使用DataTables插件从嵌套数据对象中读取每个员工的信息。

方法： DataTables 插件的column.data选项用于从嵌套的 JSON 数据中提取任何级别的数据。点(.) 用于访问column.data选项的另一个对象级别。

需要实现的预编译文件是

CSS：

https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css

JavaScript：

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

示例：以下代码使用DataTables插件在 HTML 表格中显示所有员工的数据。

员工数据结构：员工详细信息采用嵌套对象数据形式。

一名员工的详细信息结构

HTML 代码：以下代码的 JavaScript 部分从“ nestedJSONData.txt ”文件中提取数据。在下面的示例中， details.designation帮助获取每个员工的details对象的名称， details.salary获取details对象的工资。同样， address.0和address.1获取该特定员工的位置和城市。

HTML



  

  
    
    
  
    
    
  
    
    
  
    
    

  

    
        How to read information from nested 
        objects in DataTables
    
      
    
    
          
        
            
            
                
                
                
                
                
            
        
    Name Designation Salary Location City

NestedJSONData.txt 文件：以下是该文件的内容，该文件具有所有员工的嵌套对象数据。该文件用于上述 HTML 代码。

{
  "data": [
    {
      "name": "Tina Mukherjee",
      "details": {
        "designation": "BPO member",
        "salary": "300000"
      },
      "address": [
        "24,chandni chowk",
        "Pune"
      ]
    },
    {
      "name": "Gaurav",
      "details": {
        "designation": "Teacher",
        "salary": "100750"
      },
      "address": [
        "esquare,JM road",
        "Pune"
      ]
    },
    {
      "name": "Ashtwini",
      "details": {
        "designation": "Junior engineer",
        "salary": "860000"
      },
      "address": [
        "Santa cruz",
        "mumbai"
      ]
    },
    {
      "name": "Celina",
      "details": {
        "designation": "Javascript Developer",
        "salary": "430060"
      },
      "address": [
        "crr lake side ville",
        "tellapur"
      ]
    },
    {
      "name": "Aisha",
      "details": {
        "designation": "Nurse",
        "salary": "160000"
      },
      "address": [
        "rk puram",
        "Delhi"
      ]
    },
    {
      "name": "Brad henry",
      "details": {
        "designation": "Accountant",
        "salary": "370000"
      },
      "address": [
        "chaurasi lane",
        "Kolkatta"
      ]
    },
    {
      "name": "Harry",
      "details": {
        "designation": "Salesman",
        "salary": "130500"
      },
      "address": [
        "32, krishna nagar",
        "Navi mumbai"
      ]
    },
    {
      "name": "Rhovina",
      "details": {
        "designation": "Amazon supporter",
        "salary": "300900"
      },
      "address": [
        "Aparna zone",
        "hyderabad"
      ]
    },
    {
      "name": "Celina",
      "details": {
        "designation": "Senior Developer",
        "salary": "200000"
      },
      "address": [
        "23, chandni chowk",
        "pune"
      ]
    },         
   
   
    {
      "name": "Glenny",
      "details": {
        "designation": "Administrator",
        "salary": "200500"
      },
      "address": [
        "Nagpur",
        "Maharashtra"
      ]
    },
    {
      "name": "Brad Pitt",
      "details": {
        "designation": "Engineer",
        "salary": "100000"
      },
      "address": [
        "sainikpuri",
        "Delhi"
      ]
    },
    {
      "name": "Deepa",
      "details": {
        "designation": "Team Leader",
        "salary": "200500"
      },
      "address": [
        "Annanagar",
        "Chennai"
      ]
    },
      
   
    {
      "name": "Angelina",
      "details": {
        "designation": "CEO",
        "salary": "1000000"
      },
      "address": [
        "JM road",
        "Aundh pune"
      ]
    }
 ]
}

输出：

执行前：

执行后：下面的输出显示了对城市持有字符串为“Pune”等的员工进行“搜索”操作的表格。

HTML

How to read information from nested objects in DataTables