📌  相关文章
📜  如何使用 jQuery DataTables 插件显示子行信息?

📅  最后修改于: 2021-11-07 08:50:58             🧑  作者: Mango

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     

                                                                                                                                                                    
NameDesignationCitySalary
          


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后: