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