极客教程如何使用jQuery DataTables插件来显示子行信息
DataTables是现代的jQuery插件，用于为我们的网页的HTML表格添加互动和高级控件。DataTable是一个简单易用的jQuery插件，有许多选项供开发者自定义修改。DataTables的一些功能是分页、搜索、排序和多列排序。
在这篇文章中，我们将学习如何使用DataTable API方法将子行附加到父行上并显示其信息。当开发者想要显示数据表中某一行的额外信息时，这个功能是非常有用的。
实现代码所需的预编译文件如下。
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
方法：在 以下的例子中，雇员的详细信息，如employeeid，姓名，职称，工资，和address都存在于一个Ajax文本文件 “nestedData.txt “中。一个HTML表被用来在行和列中存储所有的细节。
在代码的JavaScript部分，DataTable是使用插件初始化的。在点击时，事件被处理以显示和隐藏特定数据行的更多信息。这是通过使用API的row.child.show( )和row.child.hide()方法实现的。也有其他方法。
以下代码中的getChildRow()函数定义了用户所点击的子行的设计/显示内容。开发者可以根据应用程序的需要改变代码。
示例:
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1, maximum-scale=1,
user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<!--Datatable plugin CSS file -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<!--jQuery library file -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!--Datatable plugin JS library file -->
<script type="text/javascript" src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
<style>
td.details-control {
/* Image in the first column to
indicate expand*/
background: url('images/more.png')
no-repeat center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('images/shrinkdata.PNG')
no-repeat center;
}
</style>
</head>
<body>
<h2>
Display child row detailed
information using DataTable
</h2>
<!--HTML tables with employee data-->
<table id="tableID" class="display"
style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Designation</th>
<th>City</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
/* Function for child row details*/
function getChildRow(data) {
// `data` is the data object for the row
return '<table cellpadding="5" cellspacing="0"'
+ ' style="padding-left:50px;">' +
'<tr>' +
'<td>Full name:</td>' +
'<td>' + data.name + '</td>' +
'</tr>' +
'<tr>' +
'<td>Address in detail:</td>' +
'<td>' + data.address + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extra details like ID:</td>' +
'<td>' + data.employee_id + '</td>' +
'</tr>' +
'</table>';
}
(document).ready(function () {
/* Initialization of datatables */
var table =('#tableID').DataTable({
"ajax": "nestedData.txt",
"columns": [{
"className": 'details-control',
"orderable": true,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "designation" },
{ "data": "city" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
});
// Click events for expanding and
// closing using up/down arrows
('#tableID tbody').on('click',
'td.details-control', function () {
var tr =(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// Closing the already opened row
row.child.hide();
// Removing class to hide
tr.removeClass('shown');
}
else {
// Show the child row for detail
// information
row.child(getChildRow(row.data())).show();
// To show details,add the below class
tr.addClass('shown');
}
});
});
</script>
</body>
</html>
nestedData.txt 。下面有 “nestedData.txt “文件的数据，在上述代码的Ajax选项中使用。
{
"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后。
