如何使用 jQuery DataTables 插件显示子行信息？

DataTables 是现代 jQuery 插件，用于向我们网页的 HTML 表格添加交互式和高级控件。 DataTable 是一个简单易用的 jQuery 插件，为开发人员的自定义更改提供了许多选项。 DataTables 的一些功能是分页、搜索、排序和多列排序。

在本文中，我们将学习使用 DataTable API 方法将子行附加到父行并显示其信息。当开发人员想要显示数据表中一行的附加信息时，此功能很有用。

实现代码所需的预编译文件如下。

CSS：

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

JavaScript：

//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

方法：在在下面的示例中，员工详细信息（如employee_id、姓名、职务、薪水和地址）存在于 Ajax 文本文件“nestedData.txt”中。 HTML 表用于存储行和列中的所有详细信息。

在代码的 JavaScript 部分，DataTable 是使用插件初始化的。单击时，处理事件以显示和隐藏特定数据行的更多信息。这是通过使用 API 的row.child.show( ) 和row.child.hide()方法实现的。还有其他方法。

以下代码中的getChildRow()函数定义了用户单击的子行的设计/显示内容。开发人员可以根据应用程序的需要更改代码。

例子：

HTML



  

    
  
    
  
    
    
  
    
    
  
    
    
  
    
  

  

    
        Display child row detailed 
        information using DataTable
    
      
    
    
          
        
            
                
                
                
                
                
            
        
  
     Name Designation City Salary

NestedData.txt ：下面是上面代码中 Ajax 选项中使用的“nestedData.txt”文件的数据。

{
  "data": [
    {
      "employee_id": "emp1",
      "name": "Teza",
      "designation": "Architect",
      "salary": "Rs.350,800",     
      "city": "Lucknow",
      "address": "54,komal street"
    },
    {
      "employee_id": "emp2",
      "name": "Garima",
      "designation": "Accountant",
      "salary": "Rs.180,050",    
      "city": "Hyderabad",
      "address": "Hitech city,kodapur"
    },
    {
      "employee_id": "emp3",
      "name": "Ashmita",
      "designation": "Technical Author",
      "salary": "Rs.186,000",    
      "city": "Kolkatta",
      "address": "156, new park,chowk"
    },
    {
      "employee_id": "emp4",
      "name": "Celina",
      "designation": "Javascript Developer",
      "salary": "Rs.450,000",     
      "city": "Itanagar",
      "address": "chandni chowk,new lane"
    },
    {
      "employee_id": "emp5",
      "name": "Asha",
      "designation": "Accountant",
      "salary": "Rs.542,700",   
      "city": "Tokyo",
      "address": "54,Japanese colony"
    },
    {
      "employee_id": "emp6",
      "name": "Baren Samal",
      "designation": "Integration Specialist",
      "salary": "Rs.370,000",    
      "city": "New Delhi",
      "address": "48,RK puram"
    },
    {
      "employee_id": "emp7",
      "name": "Hari Om",
      "designation": "Sales Manager",
      "salary": "Rs.437,500",     
      "city": "Raipur",
      "address": "Sector 6,bhilai"
    },
    {
      "employee_id": "emp8",
      "name": "Ranu",
      "designation": "Integration Specialist",
      "salary": "Rs.330,900",     
      "city": "Tokyo",
      "address": "64,indian colony"
    },
    {
      "employee_id": "emp9",
      "name": "Celly",
      "designation": "PHP Developer",
      "salary": "Rs.275,500",    
      "city": "Secunderabad",
      "address": "23,Sainikpuri"
    },
   {
      "employee_id": "emp55",
      "name": "Ama",
      "designation": "Director",
      "salary": "Rs.985,000",    
      "city": "kanpur",
      "address": "63,Narangi lane"
    },
    {
      "employee_id": "emp56",
      "name": "Michael Jackson",
      "designation": "C++ Developer",
      "salary": "Rs.783,000",    
      "city": "Singapore",
      "address": "53,Sweetpark"
    },
    {
      "employee_id": "emp57",
      "name": "Danny",
      "designation": "Customer Support",
      "salary": "Rs.345,000",    
      "city": "Ludhiana",
      "address": "456,Punjab"
    }
  ]
}

输出：

子行显示前：

子行显示1后：

子行显示2后：

HTML

Display child row detailed information using DataTable