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 orderCellsTop se usa para especificar en qué celda se aplicará el controlador de eventos de orden en la tabla. Esto se puede usar en los casos en que se usan múltiples encabezados complejos. Establecer la opción en verdadero adjuntará el controlador de eventos de pedido a la celda única superior de la tabla, mientras que establecer la opción en falso lo adjuntará a la celda inferior de la tabla, que es el comportamiento predeterminado.
{ orderCellsTop: 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 usa para especificar en qué celda del encabezado se adjuntará el controlador de eventos de orden. El valor predeterminado es falso.
Los siguientes ejemplos ilustran el uso de esta opción.
Ejemplo 1: en este ejemplo, el controlador de eventos de pedido se aplicará a la celda superior del encabezado.
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 orderCellsTop 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>
<tr>
<th>Day Selector</th>
<th>Name Selector</th>
<th>Age Selector</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({
// Use the bottom cell for
// the order listener
orderCellsTop: false,
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, el controlador de eventos de pedido se aplicará a la celda inferior del encabezado.
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 orderCellsTop 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>
<tr>
<th>Day Selector</th>
<th>Name Selector</th>
<th>Age Selector</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({
// Use the top unique cell for
// the order listener
orderCellsTop: true,
});
});
</script>
</body>
</html>
Producción:
Referencia: https://datatables.net/reference/option/orderCellsTop
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA