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 orderClasses se usa para especificar si las columnas que están ordenadas actualmente tendrán una clase aplicada o no. De forma predeterminada, DataTables aplica las clases sorting_1 , sorting_2 y sorting_3 a las columnas que se ordenan. Esto agrega resaltado a las columnas ordenadas para que puedan distinguirse. El número después de la clase indica el nivel de clasificación que se utiliza, siendo el nivel máximo 3, después del cual se repite la última clase.
Sin embargo, esta funcionalidad se puede deshabilitar para aumentar el rendimiento en sistemas más antiguos o en los casos en que se deba manipular una gran cantidad de filas, utilizando esta opción.
{ orderClasses: 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 si las columnas ordenadas actualmente en la tabla se resaltarán usando las clases predefinidas. El valor por defecto es verdadero.
Los siguientes ejemplos ilustran el uso de esta opción.
Ejemplo 1: en este ejemplo, las clases de ordenación no se pueden agregar a las columnas. El color de fondo de las tres clases de clasificación se ha modificado usando CSS para que la diferencia sea más notable.
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>
<style>
/* Specify the background color in the
classes applied to the sorted columns */
.sorting_1 {
background-color: greenyellow !important;
}
.sorting_2 {
background-color: green !important;
}
.sorting_3 {
background-color: darkgreen !important;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<h3>DataTables orderClasses 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>
<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>2</td>
<td>Astra</td>
<td>37</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
order: [[0, 'asc'], [1, 'desc'], [2, 'asc']],
// Disable the highlighting of
// columns that are sorted
orderClasses: false,
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, las clases relevantes están habilitadas y agregadas a las columnas. El color de fondo de las tres clases de clasificación se ha modificado usando CSS para que la diferencia sea más notable.
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>
<style>
/* Specify the background color in the
classes applied to the sorted columns */
.sorting_1 {
background-color: greenyellow !important;
}
.sorting_2 {
background-color: green !important;
}
.sorting_3 {
background-color: darkgreen !important;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<h3>DataTables orderClasses 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>
<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>2</td>
<td>Astra</td>
<td>37</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
order: [[0, 'asc'], [1, 'desc'], [2, 'asc']],
// Enable the highlighting of
// columns that are sorted
orderClasses: true,
});
});
</script>
</body>
</html>
Producción:
Referencias : https://datatables.net/reference/option/orderClasses
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA