DataTables es un complemento de jQuery que se puede usar para agregar controles interactivos y avanzados a las tablas HTML de 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 tabIndex se utiliza para especificar el orden de flujo en el que se pueden seleccionar los controles de la tabla en la página. Esta opción se puede usar para anular este flujo y cambiar la forma en que se usa el teclado para interactuar con la página. De forma predeterminada, un DataTable tendrá un tabIndex ya asignado para que los controles sean accesibles sin el uso del mouse.
El valor de -1 significará que la navegación integrada de la tabla se deshabilitará y evitará el uso del teclado para navegar por la página.
{ tabIndex: value }
Parámetros: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación.
- valor: este es un valor entero que especifica el flujo de la tabla cuando se usa la tecla de tabulación. El valor predeterminado es 0.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo 1: en este ejemplo, la primera tabla tiene tabIndex establecido en 2 y la segunda tabla debe tener tabIndex establecido en 1, por lo tanto, los controles de la segunda tabla se seleccionan antes que la primera tabla.
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 tabIndex 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>
</tbody>
</table>
<br>
<!-- HTML table with random data -->
<table id="tableID2" 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>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
info: false,
paging: false,
searching: false,
// Specify the tabindex value for
// selecting the controls of the table
tabIndex: 2,
});
$('#tableID2').DataTable({
info: false,
paging: false,
searching: false,
// Specify the tabindex value for
// selecting the controls of the table
tabIndex: 1,
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, la primera tabla tiene tabIndex establecido en -1, por lo tanto, la primera tabla no se puede seleccionar en el flujo del documento.
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 tabIndex 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>
</tbody>
</table>
<br>
<!-- HTML table with random data -->
<table id="tableID2" 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>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
info: false,
paging: false,
searching: false,
// Disable the selecting of the
// controls of the table
tabIndex: -1,
});
$('#tableID2').DataTable({
info: false,
paging: false,
searching: false,
// Specify the tabindex value for
// selecting the controls of the table
tabIndex: 0,
});
});
</script>
</body>
</html>
Producción:
la primera tabla no es seleccionable
Referencia:
https://datatables.net/reference/option/tabIndex
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA