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 autoWidth se usa para especificar si el cálculo automático del ancho de columna en el DataTable está habilitado o no. Este cálculo lleva un poco de tiempo y se puede deshabilitar cuando los anchos de las columnas se pasan explícitamente mediante la opción column.width .
Sintaxis:
{ autoWidth: 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 indica si el cálculo automático del ancho de columna está habilitado. El valor por defecto es verdadero.
Los siguientes ejemplos ilustran el uso de esta opción.
Ejemplo 1: en este ejemplo, la opción autoWidth se establece en su estado predeterminado, lo que significa que los anchos de las columnas se calcularán automáticamente.
HTML
<!DOCTYPE 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 autoWidth Option</h3>
<!-- HTML table with random data -->
<table id="tableID" class="display nowrap">
<thead>
<tr>
<th>ID</th>
<th>Full Name</th>
<th>Age</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 automatic calculation
// of column widths in the DataTable
autoWidth: true
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, la opción autoWidth se establece en falso y los anchos de columna se pasan como una array.
HTML
<!DOCTYPE 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 autoWidth Option</h3>
<!-- HTML table with random data -->
<table id="tableID" class="display nowrap">
<thead>
<tr>
<th>ID</th>
<th>Full Name</th>
<th>Age</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 automatic calculation
// of column widths in the DataTable
autoWidth: false,
// The columns are explicitly
// specified as the column array
columns: [
{ "width": "5%" },
{ "width": "20%" },
{ "width": "5%" },
{ "width": "50%" },
{ "width": "25%" }
]
});
});
</script>
</body>
</html>
Producción:
Referencia: https://datatables.net/reference/option/autoWidth
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA