如何从 DataTables 中的嵌套数组加载数据？

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

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

方法： DataTables 插件的column.data选项用于使用点表示法从数组中提取数据。 dot(.) 用于访问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

嵌套数组的结构：以下结构保存一名员工的数据。关键的“名”的名和姓持有的价值观，关键的“细节”拥有跟随的钥匙“位置”和“城市”与相应的值名称和薪水值。

行数据

示例：以下代码使用 DataTable 插件在 HTML 表格中显示所有员工的数据。以下代码的 JavaScript 部分从“ nestedSubarrays.txt ”文件中提取数据。在以下示例中， details.0有助于获取Designation ， details.1有助于获取每个员工的 Salary。类似地， “data”:“location”获取该特定员工的位置。

HTML



  

    
    
  
    
    
      
    
    
  
    
    

  

    
        How to load data from nested 
        arrays in DataTables
    
      
    
    
          
        
            
            
                
                
                
                
            
        
    Name Location Designation Salary

nestedSubarrays.txt：以下是“nestedSubarrays.txt”文件中所有员工的数据内容。

{
  "data": [
    {
      "name": [
        "Ashwini",
        "Sharma"
      ],
      "details": [
        "System Architect",
        "Rs.320,800"        
      ],
      "location": "chandni chowk",
      "city": "Delhi"
    },
     {
      "name": [
        "Rakesh",
        "Trivedi"
      ],
      "details": [
        "Solution Architect",
        "Rs.420,800"        
      ],
      "location": "tellapur",
      "city": "Hyderabad"
    },
     {
      "name": [
        "Ashu",
        "Rana"
      ],
      "details": [
        "Accountant",
        "Rs.120,100"        
      ],
      "location": "lal chowk",
      "city": "Punjab"
    },
     {
      "name": [
        "Nupur",
        "Joshi"
      ],
      "details": [
        "Developer",
        "Rs.520,800"        
      ],
      "location": "Nallagandla",
      "city": "Bangalore"
    },
     {
      "name": [
        "Jyotsna",
        "Sharma"
      ],
      "details": [
        "Teacher",
        "Rs.120,800"        
      ],
      "location": "New street",
      "city": "Delhi"
    },
     {
      "name": [
        "Rajni",
        "Singh"
      ],
      "details": [
        "System Admin",
        "Rs.220,800"        
      ],
      "location": "Attapur",
      "city": "Nagpur"
    },
     {
      "name": [
        "Tara",
        "Sharma"
      ],
      "details": [
        "Tech lead",
        "Rs.520,800"        
      ],
      "location": "chandni chowk",
      "city": "Pune"
    },
     {
      "name": [
        "Ashmita",
        "Sahoo"
      ],
      "details": [
        "System Lead",
        "Rs.120,800"        
      ],
      "location": "chandni street",
      "city": "Rajasthan"
    },
     {
      "name": [
        "Tony",
        "Blair"
      ],
      "details": [
        "System Architect",
        "Rs.620,800"        
      ],
      "location": "New lane",
      "city": "Dharmshala"
    },
     {
      "name": [
        "Katrina",
        "Kaif"
      ],
      "details": [
        "Engineer",
        "Rs.320,800"        
      ],
      "location": "chandni chowk",
      "city": "Mumbai"
    },
     {
      "name": [
        "John",
        "Doe"
      ],
      "details": [
        "System Engineer",
        "Rs.320,800"        
      ],
      "location": "Anna nagar",
      "city": "Delhi"
    },
     {
      "name": [
        "Maya",
        "Sharma"
      ],
      "details": [
        "Architect",
        "Rs.520,800"        
      ],
      "location": "Sainikpuri",
      "city": "Hyderabad"
    }
 ]
}

注意：假设上面的文件数据模式不符合正确的 JSON 格式，那么它会抛出一个 DataTable 插件的警告，如下所示。

warning: table id={id-of-html-table} - Invalid JSON response.

输出：

执行前：

执行后：以下输出显示了显示“搜索”操作的表，该表显示了具有“系统”前缀的名称（如“系统架构师”、“系统主管”等）的员工的“搜索”操作。

名称搜索

HTML

How to load data from nested arrays in DataTables