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 scrollY se usa para especificar si se debe habilitar el desplazamiento vertical en un DataTable. Esta opción restringirá la altura de DataTable al valor dado y permitirá al usuario desplazarse por cualquier contenido desbordado en la propia tabla. Esto se puede utilizar en situaciones en las que es necesario colocar varias mesas en un espacio limitado. El valor de altura se puede dar en cualquier unidad CSS o en un número que se trataría como un valor de píxel.
Sintaxis:
{ scrollY: value }
Valor de la opción: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación:
- value: este es un valor de string que especifica la altura de DataTable y permite el desplazamiento vertical. El valor predeterminado es una string vacía.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo 1: este ejemplo permite el desplazamiento vertical de DataTable.
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 scrollY Option</h3>
<!-- HTML table with student data -->
<table id="tableID" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sam</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Sam</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Sameer</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>Rob</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>Robber</td>
<td>68</td>
</tr>
<tr>
<td>6</td>
<td>Mikasa</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>Eren</td>
<td>23</td>
</tr>
<tr>
<td>8</td>
<td>Jean</td>
<td>35</td>
</tr>
<tr>
<td>9</td>
<td>Walter</td>
<td>65</td>
</tr>
<tr>
<td>10</td>
<td>Jessie</td>
<td>28</td>
</tr>
<tr>
<td>11</td>
<td>Gabi</td>
<td>20</td>
</tr>
<tr>
<td>12</td>
<td>Tim</td>
<td>30</td>
</tr>
<tr>
<td>13</td>
<td>Max</td>
<td>35</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
// Enable the vertical scrolling
// of data in DataTable to 160px
scrollY: "160px",
// Disable the paging and
// allow collapsing of the
// table when data is less
paging: false,
scrollCollapse: true
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo deshabilita el desplazamiento vertical de DataTable.
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 scrollY Option</h3>
<!-- HTML table with student data -->
<table id="tableID" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sam</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Sam</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Sameer</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>Rob</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>Robber</td>
<td>68</td>
</tr>
<tr>
<td>6</td>
<td>Mikasa</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>Eren</td>
<td>23</td>
</tr>
<tr>
<td>8</td>
<td>Jean</td>
<td>35</td>
</tr>
<tr>
<td>9</td>
<td>Walter</td>
<td>65</td>
</tr>
<tr>
<td>10</td>
<td>Jessie</td>
<td>28</td>
</tr>
<tr>
<td>11</td>
<td>Gabi</td>
<td>20</td>
</tr>
<tr>
<td>12</td>
<td>Tim</td>
<td>30</td>
</tr>
<tr>
<td>13</td>
<td>Max</td>
<td>35</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
// Disable the vertical scrolling
// of data in DataTable
scrollY: "",
// Disable the paging
paging: false,
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA