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 scrollX se usa para especificar si se debe habilitar el desplazamiento horizontal en un DataTable. Esta opción permitirá al usuario desplazarse horizontalmente por cualquier contenido desbordado en la propia tabla. Esto se puede usar cuando hay muchas columnas o las columnas no encajan en el diseño. Un valor verdadero habilita este desplazamiento y un valor falso lo deshabilita.
Sintaxis:
{ scrollX: value }
Valor de la opción: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación:
- valor: Este es un valor booleano que habilita o deshabilita el desplazamiento horizontal de la DataTable. El valor predeterminado es falso.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo 1: este ejemplo permite el desplazamiento horizontal 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 scrollX Option</h3>
<!-- HTML table with random data -->
<table id="tableID" class="display nowrap"
style="width: 100%">
<thead>
<tr>
<th>Registration ID</th>
<th>Full Name</th>
<th>Age at Registration</th>
<th>Full Address</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sam Fisher</td>
<td>35</td>
<td>Earth, Galaxy</td>
<td>01234344043</td>
</tr>
<tr>
<td>2</td>
<td>Jack the Ripper</td>
<td>30</td>
<td>Earth, Galaxy</td>
<td>0124334043</td>
</tr>
<tr>
<td>3</td>
<td>Reaper the Leviathan</td>
<td>45</td>
<td>4546B</td>
<td>0189994043</td>
</tr>
<tr>
<td>4</td>
<td>Ghost the Leviathan</td>
<td>105</td>
<td>4546B</td>
<td>0123489043</td>
</tr>
<tr>
<td>5</td>
<td>Robby the Robber</td>
<td>19</td>
<td>Mars</td>
<td>68898988</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
// Enable the horizontal scrolling
// of data in DataTable
scrollX: true
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo deshabilita el desplazamiento horizontal 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;">
GeeksForGeek
s</h1>
<h3>DataTables scrollX Option</h3>
<!-- HTML table with random data -->
<table id="tableID" class="display nowrap"
style="width: 100%">
<thead>
<tr>
<th>Registration ID</th>
<th>Full Name</th>
<th>Age at Registration</th>
<th>Full Address</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sam Fisher</td>
<td>35</td>
<td>Earth, Galaxy</td>
<td>01234344043</td>
</tr>
<tr>
<td>2</td>
<td>Jack the Ripper</td>
<td>30</td>
<td>Earth, Galaxy</td>
<td>0124334043</td>
</tr>
<tr>
<td>3</td>
<td>Reaper the Leviathan</td>
<td>45</td>
<td>4546B</td>
<td>0189994043</td>
</tr>
<tr>
<td>4</td>
<td>Ghost the Leviathan</td>
<td>105</td>
<td>4546B</td>
<td>0123489043</td>
</tr>
<tr>
<td>5</td>
<td>Robby the Robber</td>
<td>19</td>
<td>Mars</td>
<td>68898988</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
// Disable the horizontal scrolling
// of data in DataTable
scrollX: 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