DataTables es un complemento moderno de jQuery para agregar controles interactivos y avanzados a las tablas HTML de nuestra página web. Es un complemento jQuery fácil de usar con una amplia gama de muchas opciones para los cambios personalizados del desarrollador. Las características comunes de DataTables son la clasificación, la búsqueda, la paginación y el ordenamiento de varias columnas.
En este artículo, aprenderemos a manejar eventos de jQuery usando el complemento.
Los archivos precompilados que se necesitan para implementar son
-
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: Tenemos una tabla HTML con los datos de los estudiantes como ID, nombre, edad, género y las calificaciones obtenidas por cada uno de ellos. Se toma otro «div» con id como resultID para mostrar el resultado del evento activado por el usuario. La tabla de datos del complemento se inicializa con la identificación de la tabla en la parte JavaScript del código. Los eventos se tratan utilizando el método on( ) de jQuery. El método row().data() del complemento DataTable se utiliza para obtener información sobre la fila seleccionada por el usuario.
Ejemplo: El siguiente ejemplo demuestra el manejo de eventos jQuery usando el complemento DataTable.
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>
</head>
<body>
<h2>Handling events in Datatable </h2>
<!--HTML tables with student data-->
<table id="tableID" class="display"
style="width:100%">
<thead>
<tr>
<th>StudentID</th>
<th>StudentName</th>
<th>Age</th>
<th>Gender</th>
<th>Marks Scored</th>
</tr>
</thead>
<tbody>
<tr>
<td>ST1</td>
<td>Prema</td>
<td>35</td>
<td>Female</td>
<td>320</td>
</tr>
<tr>
<td>ST2</td>
<td>Wincy</td>
<td>36</td>
<td>Female</td>
<td>170</td>
</tr>
<tr>
<td>ST3</td>
<td>Ashmita</td>
<td>41</td>
<td>Female</td>
<td>860</td>
</tr>
<tr>
<td>ST4</td>
<td>Kelina</td>
<td>32</td>
<td>Female</td>
<td>433</td>
</tr>
<tr>
<td>ST5</td>
<td>Satvik</td>
<td>41</td>
<td>male</td>
<td>162</td>
</tr>
<tr>
<td>ST6</td>
<td>William</td>
<td>37</td>
<td>Female</td>
<td>372</td>
</tr>
<tr>
<td>ST7</td>
<td>Chandan</td>
<td>31</td>
<td>male</td>
<td>375</td>
</tr>
<tr>
<td>ST8</td>
<td>David</td>
<td>45</td>
<td>male</td>
<td>327</td>
</tr>
<tr>
<td>ST9</td>
<td>Harry</td>
<td>29</td>
<td>male</td>
<td>205</td>
</tr>
<tr>
<td>ST10</td>
<td>Frost</td>
<td>29</td>
<td>male</td>
<td>300</td>
</tr>
<tr>
<td>ST11</td>
<td>Ginny</td>
<td>31</td>
<td>male</td>
<td>560</td>
</tr>
<tr>
<td>ST12</td>
<td>Flod</td>
<td>45</td>
<td>Female</td>
<td>342</td>
</tr>
<tr>
<td>ST13</td>
<td>Marshy</td>
<td>23</td>
<td>Female</td>
<td>470</td>
</tr>
<tr>
<td>ST13</td>
<td>Kennedy</td>
<td>43</td>
<td>male</td>
<td>313</td>
</tr>
<tr>
<td>ST14</td>
<td>Fiza</td>
<td>31</td>
<td>Female</td>
<td>750</td>
</tr>
<tr>
<td>ST15</td>
<td>Silva</td>
<td>34</td>
<td>male</td>
<td>985</td>
</tr>
</tbody>
</table>
<br/>
<div id="resultID"></div>
<script>
<!--Initialization of datatables -->
$(document).ready(function() {
var datatable = $('#tableID').DataTable();
<!--On click of one row -->
$('#tableID tbody').on('click', 'tr', function ()
{
var data = datatable.row( this ).data();
<!--It displays the selected user information -->
$("#resultID").show().html("<b>User clicked on</b> "
+data[0]+' row '+
'<b> with Name:</b> '
+data[1]+ '<b> ,Age:</b> '+data[2]+'<b> ,Marks:</b> '
+data[4]);
});
});
</script>
</body>
</html>
Producción:
- Antes del evento de clic en fila:
- Después del evento de clic en fila:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA