DataTables es un complemento jQuery moderno para agregar controles interactivos y avanzados a las tablas HTML para una página web. Es un complemento muy fácil de usar con una variedad de opciones para los cambios personalizados del desarrollador según las necesidades de la aplicación. Las características del complemento incluyen paginación, clasificación, búsqueda y ordenación de varias columnas.
En este artículo, demostraremos la implementación de la eliminación de una sola fila después de seleccionar la fila con el complemento DataTables .
Enfoque: En el siguiente ejemplo, DataTables usa los detalles del estudiante
- Al hacer clic en el botón, elimine la fila junto con la configuración de la API draw() en falso.
- La API draw() se usa para reflejar los cambios después de una acción en la tabla.
Los archivos precompilados que se necesitan para implementar son
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
https://code.jquery.com/jquery-3.5.1.js https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Ejemplo: El siguiente ejemplo demuestra el enfoque anterior que muestra la selección de una sola fila y luego elimina la fila.
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 {
text-align: center;
}
</style>
</head>
<body>
<h2>Delete single row using DataTables plugin</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>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 />
<button id="btnID"><b>Select and Delete row</b></button>
<script>
/* Initialization of datatables */
$(document).ready(function () {
// Paging and other information are
// disabled if required, set to true
var mytableVar = $('#tableID').DataTable({
"paging": false,
"info": false
});
// Ordering the table in descending
// order of students marks
mytableVar.order([[4, 'desc']]).draw(false);
$('#tableID tbody').on('click', 'tr', function () {
// Check for 'selected' class and remove
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
mytableVar.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
// On button click, remove the row with setting
// the draw() to false
// draw() API is used to reflect the changes
// after a action
$('#btnID').click(function () {
mytableVar.row('.selected').remove().draw(false);
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón: observe que las calificaciones obtenidas por los estudiantes en la última columna están en orden descendente.
- Después de hacer clic en el botón: El siguiente resultado muestra que se eliminó la fila para el nombre del estudiante «William».
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA