DataTables es un complemento de jQuery que se puede usar para agregar controles interactivos y avanzados a las tablas HTML para la página web. Esto también permite buscar, ordenar y filtrar los datos de la tabla según las necesidades del usuario. DataTable también expone una potente API que se puede utilizar para modificar la forma en que se muestran los datos.
La opción scrollCollapse se usa para especificar si la tabla se colapsará cuando se use la opción scrollY para determinar la altura máxima de la tabla. Esto es visible cuando las filas no llenan completamente la altura de la tabla que se proporciona y puede dejar un espacio en blanco sobre el pie de página. Habilitar esta opción hará que la ventana gráfica de la tabla se colapse y la altura de la tabla sea igual a la cantidad de registros que se muestran.
{ scrollCollapse: value }
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- valor: Este es un valor booleano que se utiliza para especificar si la tabla se contraerá cuando el número de filas mostradas sea menor que la altura especificada. El valor predeterminado es falso.
Los siguientes ejemplos ilustran el uso de esta opción.
Ejemplo 1: En este ejemplo, el colapso de la tabla está habilitado.
HTML
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<h3>DataTables scrollCollapse Option</h3>
<!-- HTML table with random data -->
<table id="tableID" class="display nowrap">
<thead>
<tr>
<th>Day</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Patricia</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>Caleb</td>
<td>47</td>
</tr>
<tr>
<td>1</td>
<td>Abigail</td>
<td>48</td>
</tr>
<tr>
<td>5</td>
<td>Rahim</td>
<td>44</td>
</tr>
<tr>
<td>5</td>
<td>Sheila</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>Lance</td>
<td>48</td>
</tr>
<tr>
<td>5</td>
<td>Erin</td>
<td>48</td>
</tr>
<tr>
<td>1</td>
<td>Christopher</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Roary</td>
<td>35</td>
</tr>
<tr>
<td>4</td>
<td>Mikasa</td>
<td>48</td>
</tr>
<tr>
<td>2</td>
<td>Astra</td>
<td>37</td>
</tr>
<tr>
<td>5</td>
<td>Eren</td>
<td>48</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
scrollY: 200,
// Enable the collapsing
// of the table
scrollCollapse: true,
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, el colapso de la tabla está deshabilitado.
HTML
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<h3>DataTables scrollCollapse Option</h3>
<!-- HTML table with random data -->
<table id="tableID" class="display nowrap">
<thead>
<tr>
<th>Day</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Patricia</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>Caleb</td>
<td>47</td>
</tr>
<tr>
<td>1</td>
<td>Abigail</td>
<td>48</td>
</tr>
<tr>
<td>5</td>
<td>Rahim</td>
<td>44</td>
</tr>
<tr>
<td>5</td>
<td>Sheila</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>Lance</td>
<td>48</td>
</tr>
<tr>
<td>5</td>
<td>Erin</td>
<td>48</td>
</tr>
<tr>
<td>1</td>
<td>Christopher</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Roary</td>
<td>35</td>
</tr>
<tr>
<td>4</td>
<td>Mikasa</td>
<td>48</td>
</tr>
<tr>
<td>2</td>
<td>Astra</td>
<td>37</td>
</tr>
<tr>
<td>5</td>
<td>Eren</td>
<td>48</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
scrollY: 200,
// Enable the collapsing
// of the table
scrollCollapse: false,
});
});
</script>
</body>
</html>
Producción:
Referencia: https://datatables.net/reference/option/scrollCollapse
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA