DataTables es un complemento jQuery moderno para agregar controles interactivos y avanzados a las tablas HTML para nuestra página web. DataTable es un complemento jQuery fácil de usar con muchas opciones para los cambios personalizados del desarrollador. Algunas características de DataTables son la paginación, la búsqueda, la clasificación y el ordenamiento de varias columnas.
En este artículo, aprenderemos a usar los métodos de la API de DataTable para adjuntar una fila secundaria a una fila principal y mostrar su información. Esta característica es útil cuando el desarrollador quiere mostrar información adicional para una fila en una tabla de datos.
Los archivos precompilados que se necesitan para implementar los códigos son los siguientes.
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
Enfoque: En el siguiente ejemplo , los detalles de los empleados como employee_id, nombre, designación, salario y dirección están presentes en un archivo de texto Ajax «nestedData.txt». Se utiliza una tabla HTML para almacenar todos los detalles en filas y columnas.
En la parte JavaScript del código, DataTable se inicializa mediante el complemento. Al hacer clic, los eventos se manejan para mostrar y ocultar más información para una fila de datos en particular. Esto se implementa mediante el uso de los métodos row.child.show( ) y row.child.hide() de la API . Hay otros métodos también.
La función getChildRow() en el siguiente código define el contenido de diseño/visualización para la fila secundaria en la que el usuario hizo clic. El desarrollador puede cambiar el código según las necesidades de la aplicación.
Ejemplo:
HTML
<!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 : lo siguiente tiene los datos para el archivo «nestedData.txt» utilizado en la opción Ajax en el código anterior.
{
"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"
}
]
}
Producción:
- Antes de mostrar la fila secundaria:
- Después de la visualización de la fila secundaria 1:
- Después de la visualización de la fila secundaria 2:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA