Haga que la tabla HTML sea ordenable con la biblioteca de tabla de clasificación

Vista prévia

Descripción

Sort-Table es una pequeña biblioteca de JavaScript que aplica la funcionalidad de ordenación a la tabla HTML.

Funcionamiento

Importe la hoja de estilos Sort-Table. min. CSS y JavaScript Sort-Table. min. js archivos en el documento.

<script src="sort-table.js"></script>
<link rel="stylesheet" href="sort-table.css">

La funcionalidad básica de ordenación de tablas se puede agregar simplemente agregando CSS Class JS-Sort-Table a todas las tablas dentro del documento.

<table class="js-sort-table" id="demo1">

<caption>&lt;table class="js-sort-table"&gt;</caption>

<thead>

<tr>



<th class="js-sort-number">Row</th>



<th>Strings</th>



<th class="js-sort-date">Dates</th>

</tr>

</thead>

<tbody>

<tr>



<td>1</td>



<td>Shoe</td>



<td>9/11/2001</td>

</tr>

<tr>



<td>2</td>



<td>Twine</td>



<td>12/7/1941</td>

</tr>

<tr>



<td>3</td>



<td>Thread</td>



<td>1/20/2008</td>

</tr>

<tr>



<td>4</td>



<td>Rope</td>



<td>9/17/1862</td>

</tr>

<tr>



<td>5</td>



<td>Yarn</td>



<td>8/6/1945</td>

</tr>

<tr>



<td>6</td>



<td>Nylon</td>



<td>7/4/1776</td>

</tr>

</tbody>
</table>

Sort-Table. js utiliza clases CSS para realizar un seguimiento del estado de ordenación. Esto permite un estilo avanzado aplicando sus propios estilos a las clases como se muestra a continuación.

• JS-Sort-ASC: ordenación ascendente
• JS-Sort-DESC: ordenación descendente
• JS-Sort-0: número basado en cero de la columna ordenada
• JS-Sort-String: ordenar por cadena
• JS-Sort-Date: ordenar por fecha
• JS-Sort-Number: ordenar por número
• JS-Sort-Last: ordenar por la última palabra
• JS-Sort-Input: ordenar por el valor de entrada

Registro de cambios

02/08/2019

• Estilo de ordenación ajustada estilos decorativos