Mira nuestra reseña de los 7 mejores plugins de JavaScript y jQuery para clasificar tablas

Top 7: Los mejores plugins de JavaScript y jQuery para clasificar y ordenar tablas

Hoy en día, muchas personas prefieren ordenar las tablas simplemente haciendo clic en sus encabezados sin esperar que se recargue la página. Lo creas o no, a veces puede ser doloroso (según el diseño y el peso de su sitio web o la velocidad de la conexión a Internet del usuario) simplemente actualizar una página, por lo que si puedes incluir JavaScript en tu documento, es posible que lo desees para permitir al usuario hacer esto dinámicamente en la vista sin necesidad de lógica de servidor.

Como es habitual, una solución de código abierto es ideal, ya que se ocupará de múltiples problemas que pueden aparecer durante la clasificación de cualquier tipo de tabla. Esto aumentará considerablemente el tiempo de desarrollo de esta función y garantizará que el pedido funcione como se espera. Hemos recopilado para ti 5 de las mejores soluciones de código abierto que puedes implementar en tus propias tablas, ¡esperamos que te gusten!

7. Watable

Github

Watable

Watable es el plugin de tabla jQuery del ejército suizo que te permite filtrar, formatear, paginar y ordenar tus datos con facilidad y velocidad. ¿Soporte IE? Sí, IE9 +. Sin embargo, IE7 / IE8 funciona si eliminas el último polyfill de observe-js en la parte inferior.

6. jQuery Table Sort

Github

jQuery Table Sort es un complemento de jQuery pequeño y muy simple para tablas ordenables. Para que funcione, solo necesitas agregar jQuery y el complemento tablesort a tu página:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.tablesort.js"></script>

E inicializarlo con el método:

$('table').tablesort();

Después de la inicialización, podrás ordenar la tabla simplemente haciendo clic en tus encabezados.

5. Bootstrap Table

Github

Bootstrap Table

Una tabla Bootstrap extendida con radio, casilla de verificación, clasificación, paginación y otras características adicionales. La tabla Bootstrap se ha diseñado para reducir el tiempo de desarrollo y no requiere conocimientos específicos de los desarrolladores. Es a la vez ligero y rico en funciones. La mayoría de las características conocidas de este complemento son:

  • Creado para Bootstrap 3 (compatible con Bootstrap 2)
  • Diseño web adaptable
  • Mesa desplazable con encabezados fijos
  • Totalmente configurable
  • A través de atributos de datos
  • Mostrar / Ocultar columnas
  • Mostrar / Ocultar encabezados
  • Obten datos en formato JSON usando AJAX
  • Clasificación de columnas simple con un clic
  • Columna de formato
  • Selección de una o varias filas
  • Potente paginación
  • Vista de tarjeta
  • Localización
  • Extensiones

4. Stupid Table

Github

Stupid Table jQuery Plugin Sortable

Stupid Table es un complemento de tabla jQuery estúpidamente simple y absurdamente liviano que te permite ordenar por columnas y diferentes tipos. La mayoría de los complementos de clasificación de tablas intentan tener en cuenta un número ilimitado de tipos de datos y sus formas ilimitadas de presentación. Esto conduce a una base de código extremadamente inflada con solo una pequeña parte del código que alguna vez ha utilizado tu proyecto. Este complemento evita ese problema al permitirte definir tus propias formas de ordenar las columnas de la tabla. El complemento reconoce internamente "int", "string", "string-ins" (no distingue entre mayúsculas y minúsculas) y "float", por lo que las tablas de datos simples requerirán muy poco esfuerzo de tu parte.

3. Tablesort

Github

Tablesort es un componente de clasificación pequeño y simple para tablas escritas en JavaScript. Solo necesitas agregar el script de origen y usar el constructor que espera un elemento DOM de la tabla que deseas ordenar:

<script src='tablesort.min.js'></script>

<!-- Incluye los sort types que necesites -->
<script src='tablesort.number.js'></script>
<script src='tablesort.date.js'></script>

<script>
  new Tablesort(document.getElementById('table-id'));
</script>

Tablesort admite la clasificación cuando se agregan nuevos datos. Simplemente llama al método de actualización.

2. Sortable

Github

Sortable Table JavaScript Plugin

Sortable es una biblioteca de JavaScript y CSS de código abierto que agrega funcionalidad de clasificación a las tablas. Ofrece:

  • Estilos y guiones incorporados
  • 6 hermosos temas CSS
  • Huella pequeña ( <2kb min + gzip) y sin dependencias
  • Se ve y se comporta muy bien en dispositivos móviles

Funciona en los siguientes navegadores:

  • IE8 +
  • Firefox 4+
  • WebKit actual (Chrome, Safari)
  • Opera

Todo lo que necesitas hacer para usar estos complementos es incluir los estilos y el script fuente:

<link rel="stylesheet" href="sortable-theme-dark.css" />
<script src="sortable.min.js"></script>

Agrega el atributo ordenable a la tabla y alguna clase:

<table class="sortable-theme-dark" data-sortable>
    <!-- ... -->
</table>

Y ahora tu tabla debería poder ordenarse fácilmente sin necesidad de recargar tu página.

1. jQuery Table Sorter

Github

jQuery Table Sorter

jQuery Table Sorter es un complemento de jQuery que convierte cualquier tabla HTML estándar con etiquetas THEAD y TBODY en una tabla ordenable sin actualizaciones de página. Tablesorter puede analizar y clasificar con éxito muchos tipos de datos, incluidos los datos vinculados en una celda. Tiene muchas características útiles que incluyen:

  • Clasificación de varias columnas
  • Clasificación de varios cuerpos: consulta la tabla de opciones a continuación
  • Analizadores para ordenar texto, URI, enteros, moneda, flotantes, direcciones IP, fechas (ISO, formatos largos y cortos), hora. Agrega el tuyo fácilmente
  • Admite la clasificación secundaria "oculta" (p. Ej., Mantiene la clasificación alfabética al clasificar según otros criterios)
  • Extensibilidad a través del sistema de widgets
  • Navegador cruzado: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
  • Funciona con jQuery 1.2.6+ (jQuery 1.4.1+ se necesita con algunos widgets).
  • Funciona con jQuery 1.9+ (se eliminó $ .browser.msie; necesario en la versión original).
  • Tamaño de código pequeño

Puedes ordenar varias columnas simultáneamente manteniendo presionada la tecla Mayús y haciendo clic en el encabezado de una segunda, tercera o incluso cuarta columna.

Menciones honoríficas

DataTables

DataTables jQuery Plugin

DataTables es un complemento para la biblioteca jQuery Javascript. Es una herramienta muy flexible, basada en los fundamentos de la mejora progresiva, y agregará controles de interacción avanzados a cualquier tabla HTML. Las características más conocidas de este complemento son:

Bootgrid

Github

Bootgrid Implementation

jQuery Bootgrid es un poderoso extensor de tabla si lo desea. Amplía tu tabla con características agradables y útiles, como verá a continuación. Mira la demo aquí y obten una impresión de primera mano. Todo lo que necesitas para comenzar rápidamente es:

  1. Incluye las bibliotecas jQuery , jQuery Bootgrid y Bootstrap en tu código HTML.     
  2. Define el diseño de tu tabla y tus columnas de datos agregando el atributo. data-column-id 
  3. Especifica tu URL de datos utilizada para completar tu tabla de datos y configura la opción ajax directamente en tu tabla a través de la API de datos. true 

Si conoces otro complemento de código abierto increíble para ordenar tablas dinámicamente con jQuery o VanillaJS, compártelo con la comunidad en el cuadro de comentarios.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores