Guía de ordenación en JavaScript: arrays, tablas y arrastrar y soltar con SortableJS

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción

La funcionalidad de ordenación basada en JavaScript es extremadamente útil para gestionar dinámicamente datos en tablas y listas.
En este artículo explicamos de forma exhaustiva todo, desde las funciones nativas de ordenación de JavaScript hasta implementaciones intuitivas de arrastrar‑y‑soltar.

Al leer este artículo, podrás:

• Entender cómo ordenar arreglos usando las funciones estándar de JavaScript.
• Implementar funcionalidad de ordenación para tablas y listas HTML.
• Implementar ordenación por arrastrar‑y‑soltar usando SortableJS.
• Adquirir habilidades prácticas aplicables a proyectos reales mediante ejemplos y casos de uso.

Recorreremos cada tema paso a paso, así que asegúrate de seguir el contenido y probar los ejemplos por tu cuenta.

2. Comprensión de las funciones nativas de ordenación de JavaScript

2.1 Métodos básicos de ordenación

En JavaScript puedes ordenar datos de un arreglo fácilmente mediante la funcionalidad de ordenación incorporada.
Esta sección explica todo, desde el uso básico hasta ejemplos avanzados, con muestras de código.

Ejemplo de ordenación de cadenas

const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits); 
// Output: ["apple", "banana", "grape", "orange"]

Ejemplo de ordenación numérica

const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); 
// Output: [1, 5, 10, 25, 40, 100]

Al ordenar números, es importante usar una función de comparación.
Sin ella, los valores se ordenan lexicográficamente (como cadenas), lo que puede producir resultados inesperados.

2.2 Ejemplos avanzados usando funciones de comparación personalizadas

Al ordenar arreglos de objetos, puedes ordenar según una propiedad específica.

Ejemplo de ordenación de un arreglo de objetos

const users = [
  { name: "Yamada", age: 30 },
  { name: "Tanaka", age: 25 },
  { name: "Suzuki", age: 35 }
];

// Sort by age
users.sort((a, b) => a.age - b.age);
console.log(users);
/* Output:
[
  { name: "Tanaka", age: 25 },
  { name: "Yamada", age: 30 },
  { name: "Suzuki", age: 35 }
]
*/

Como se muestra arriba, usar una función de comparación te permite implementar lógica de ordenación altamente personalizada.

2.3 Consejos para optimizar el rendimiento

Al trabajar con conjuntos de datos grandes, considera los siguientes puntos:

1. Optimiza las funciones de comparación

• Evita cálculos intensivos dentro de las funciones de comparación.

1. Reduce la cantidad de datos a ordenar

• Filtra los datos innecesarios antes de ejecutar la ordenación.

1. Utiliza Web Workers

• Ejecuta las operaciones de ordenación en segundo plano para mejorar el rendimiento general.

3. Ejemplo de implementación: ordenar una tabla HTML

3.1 Funcionalidad básica de ordenación de tablas

Aquí implementaremos una característica en JavaScript que ordena los datos de una tabla HTML al hacer clic en el encabezado de una columna.

Código HTML

<table id="data-table">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Yamada</td><td>30</td></tr>
    <tr><td>Tanaka</td><td>25</td></tr>
    <tr><td>Suzuki</td><td>35</td></tr>
  </tbody>
</table>

Código JavaScript

function sortTable(columnIndex) {
  const table = document.getElementById("data-table");
  const rows = Array.from(table.rows).slice(1); // Exclude the header row

  rows.sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex].innerText;
    const cellB = rowB.cells[columnIndex].innerText;

    // Detect whether values are numeric or strings, then sort accordingly
    return isNaN(cellA) || isNaN(cellB)
      ? cellA.localeCompare(cellB)
      : cellA - cellB;
  });

  // Re-render after sorting
  rows.forEach(row => table.tBodies[0].appendChild(row));
}

Esta es una implementación sencilla que permite ordenar cada columna simplemente con un clic.

3.2 Ejemplo avanzado combinado con filtrado

Al combinar la ordenación con el filtrado, también puedes ordenar los resultados de búsqueda en tiempo real.

Ejemplo de código JavaScript

%%CODEBLOCK5%%

document.getElementById("filter-input").addEventListener("input", (e) => {
  const filter = e.target.value.toLowerCase();
  const rows = document.querySelectorAll("#data-table tbody tr");

  rows.forEach(row => {
    const text = row.innerText.toLowerCase();
    row.style.display = text.includes(filter) ? "" : "none";
  });
});

Esto habilita una función que permite a los usuarios buscar y ordenar los datos al mismo tiempo.

4. Ordenación mediante arrastrar y soltar con SortableJS

4.1 ¿Qué es SortableJS?

SortableJS es una biblioteca JavaScript que facilita la implementación de reordenamiento mediante arrastrar y soltar para elementos HTML. Tiene las siguientes características:

• Interacciones intuitivas de arrastrar y soltar.
• Altamente personalizable, y puede aplicarse a listas y tablas.
• Amigable con dispositivos móviles, compatible con operaciones táctiles.
• Ligero y sin dependencias, ofreciendo un rendimiento excelente.

4.2 Instalación y configuración básica de SortableJS

4.2.1 Pasos de instalación

Usando un CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

Usando npm (para un entorno Node.js)

npm install sortablejs

4.2.2 Configuración básica

Con el siguiente código HTML y JavaScript, puedes implementar la ordenación mediante arrastrar y soltar.

Código HTML

<ul id="sortable-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Código JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("sortable-list");
  new Sortable(list, {
    animation: 150, // Animation speed (milliseconds)
    ghostClass: "sortable-ghost" // Class applied to the element while dragging
  });
});

CSS (opcional)

.sortable-ghost {
  opacity: 0.5;
  background: #f0f0f0;
}

4.3 Ejemplo avanzado: arrastrar y soltar entre múltiples listas

Código HTML

<div>
  <ul id="list1">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
  <ul id="list2">
    <li>Item C</li>
    <li>Item D</li>
  </ul>
</div>

Código JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list1 = document.getElementById("list1");
  const list2 = document.getElementById("list2");

  new Sortable(list1, {
    group: "shared", // Set the group name
    animation: 150
  });

  new Sortable(list2, {
    group: "shared", // Use the same group name
    animation: 150
  });
});

5. Tabla comparativa: Bibliotecas de terceros vs implementación nativa

5.1 Tabla comparativa

5.2 Cuándo la implementación nativa es la mejor opción

Ventajas

1. Sin dependencias, por lo que no se requieren bibliotecas externas.
2. Rápida de implementar con código breve, ideal para funciones de ordenación simples.
3. Alto rendimiento, adecuada incluso para conjuntos de datos grandes.

Desventajas

• Sin soporte de arrastrar y soltar, lo que requiere trabajo adicional para la interacción visual.
• La personalización avanzada o el soporte de múltiples listas requieren implementación o bibliotecas adicionales.

Casos de uso

• Cuando necesitas ordenar tablas HTML estáticas o arreglos.
• Proyectos que priorizan rendimiento y funcionalidad mínima.

5.3 Cuándo SortableJS es la mejor opción

Ventajas

1. Arrastrar y soltar incorporado para una interacción visual intuitiva.
2. Soporta movimiento entre múltiples listas y sincronización con el servidor.
3. Listo para dispositivos móviles por defecto, incluyendo soporte táctil.
4. Altamente personalizable y bien adaptado a entornos de producción.

Desventajas

• Requiere añadir una biblioteca, lo que aumenta ligeramente el tamaño del proyecto.
• La complejidad del código puede incrementarse, resultando en un costo de aprendizaje mayor.
• Posibles problemas de dependencias o configuración en ciertos entornos.

Casos de uso

• Cuando necesitas listas dinámicas o funcionalidad de arrastrar y soltar.
• Diseños de UI que requieren mover elementos entre múltiples listas o guardar el orden en tiempo real.

6. Consejos de Implementación y Solución de Problemas

6.1 Optimización del Rendimiento

1. Manejo de Conjuntos de Datos Grandes

Ordenar conjuntos de datos grandes puede provocar una degradación del rendimiento.

Soluciones

• Utilizar desplazamiento virtual

  const visibleItems = items.slice(startIndex, endIndex);
  renderItems(visibleItems);
  

• Aprovechar el procesamiento asíncrono Ejecutar la lógica de ordenación en Web Workers para mantener la UI receptiva.

2. Minimizar Operaciones del DOM

La ordenación a menudo implica manipulaciones frecuentes del DOM, por lo que reducir los reflujo innecesarios es fundamental.

Solución

• Usar DocumentFragment

  const fragment = document.createDocumentFragment();
  rows.forEach(row => fragment.appendChild(row));
  table.appendChild(fragment);
  

6.2 Mejora de la Accesibilidad y Usabilidad

1. Soporte de Navegación con Teclado

Proporcionar alternativas de teclado para usuarios que no pueden usar arrastrar y soltar.

Solución

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    moveItemUp();
  } else if (e.key === 'ArrowDown') {
    moveItemDown();
  }
});

2. Mejoras en la Retroalimentación Visual

Agregar indicaciones visuales para señalar claramente las acciones de ordenación.

Ejemplo de CSS

.sortable-ghost {
  opacity: 0.5;
  border: 2px dashed #007BFF;
}

6.3 Guía de Manejo de Errores y Depuración

1. Error: La ordenación no funciona

Causa 1: Selector incorrecto

const list = document.getElementById("sortable-list");
if (!list) {
  console.error("Element not found. Please check the ID.");
}

Causa 2: Conflictos de eventos

list.removeEventListener('click', handler);

6.4 Lista de Verificación para Solución de Problemas

1. Revisar errores de JavaScript en la consola

• Utilizar la pestaña Console de las herramientas de desarrollo para identificar problemas.

1. Verificar formatos de datos

• Validar las estructuras de datos usadas en la ordenación y la comunicación con el servidor.

1. Confirmar versiones de las bibliotecas

• Asegurarse de que todas las bibliotecas y dependencias estén actualizadas.

7. Preguntas Frecuentes (FAQ)

P1: ¿Por qué no funciona la función de ordenación de la tabla?

R1: Por favor, revise los siguientes puntos.

1. Selector incorrecto

   const table = document.getElementById("data-table");
   

2. Diferenciación entre números y cadenas

   rows.sort((a, b) => Number(a) - Number(b));
   

3. Conflictos de eventos Otros códigos JavaScript o complementos pueden estar adjuntando eventos a los mismos elementos.

P2: El arrastrar y soltar no responde. ¿Qué debo hacer?

R2: Revise los siguientes elementos.

1. Confirmar que SortableJS está cargado

   console.log(Sortable);
   

2. Verificar la estructura HTML

   <ul id="sortable-list">
     <li>Item 1</li>
   </ul>
   

3. Comprobar la configuración de soporte móvil

   new Sortable(list, {
     touchStartThreshold: 5
   });
   

4. Configuración de grupo incorrecta

   group: "shared"
   

P3: ¿Cómo puedo guardar el orden ordenado en el servidor?

R3: La sincronización con el servidor se puede implementar fácilmente mediante AJAX.

Ejemplo de JavaScript

const list = document.getElementById("sortable-list");
new Sortable(list, {
  animation: 150,
  onEnd: function () {
    const items = Array.from(list.children).map(item => item.innerText);
    fetch("/save-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ order: items })
    })
    .then(response => response.json())
    .then(data => console.log("Saved successfully:", data))
    .catch(error => console.error("Error:", error));
  }
});

P4: ¿Cómo puedo mejorar el rendimiento?

R4: Considere los siguientes enfoques.

1. Utilizar desplazamiento virtual

   const visibleItems = items.slice(startIndex, endIndex);
   renderItems(visibleItems);
   

2. Usar Web Workers Procesar datos en segundo plano para mejorar la capacidad de respuesta de la UI.
3. Optimizar la lógica de ordenación

   rows.sort((a, b) => a - b);
   

P5: ¿Se puede combinar la ordenación con funcionalidades adicionales?

A5: Sí, se puede ampliar fácilmente como se muestra a continuación.

1. Combinar con filtrado en tiempo real

   document.getElementById("search").addEventListener("input", (e) => {
     const value = e.target.value.toLowerCase();
     document.querySelectorAll("#sortable-list li").forEach(item => {
       item.style.display = item.innerText.toLowerCase().includes(value) ? "" : "none";
     });
   });
   

2. Agregar y eliminar elementos dinámicamente

   function addItem(text) {
     const list = document.getElementById("sortable-list");
     const li = document.createElement("li");
     li.textContent = text;
     list.appendChild(li);
   }
   
   function removeItem(index) {
     const list = document.getElementById("sortable-list");
     list.removeChild(list.children[index]);
   }
   

8. Conclusión

8.1 Resumen del artículo

1. Ordenación nativa en JavaScript

• Aprendiste técnicas básicas de ordenación usando Array.prototype.sort().
• Se cubrió la ordenación de arreglos de objetos con funciones de comparación y estrategias de optimización de rendimiento.

2. Ordenación de tablas HTML

• Se presentaron ejemplos prácticos para ordenar datos de tabla por columna.
• Se exploraron casos de uso avanzados combinados con funcionalidad de filtrado.

3. Arrastrar y soltar con SortableJS

• Implementación de una ordenación intuitiva mediante arrastrar y soltar usando SortableJS.
• Aprendizaje de enfoques flexibles, incluyendo movimiento entre múltiples listas y sincronización con el servidor.

4. Comparación nativa vs. SortableJS

• Comparación de fortalezas y casos de uso para ayudar a seleccionar el mejor enfoque para cada proyecto.

5. Solución de problemas y Preguntas frecuentes

• Se proporcionaron soluciones para problemas comunes y consejos para mejorar el rendimiento y la fiabilidad.

8.2 Pasos prácticos siguientes

La funcionalidad de ordenación es un componente clave para mejorar interfaces dinámicas y la gestión de datos.
Ten en cuenta los siguientes puntos a medida que avanzas.

1. Comienza con implementaciones simples y luego explora casos de uso avanzados
2. Experimenta personalizando el código
3. Domina el manejo de errores y las técnicas de depuración
4. Mejora continuamente el rendimiento y la usabilidad

8.3 Pasar a la acción

1. ¡Intenta implementarlo tú mismo!

• Aplica los ejemplos de código de este artículo a tus propios proyectos y pruébalos en la práctica.
• Compartir tu código fuente en GitHub y intercambiar comentarios con otros desarrolladores también es recomendable.

2. ¡Sigue mejorando tus habilidades!

• Si deseas aprender más sobre funciones de ordenación, consulta los siguientes recursos oficiales:
• Documentación oficial de SortableJS
• MDN Web Docs – Array.sort()

3. Revisa artículos relacionados

• También recomendamos artículos sobre “Implementación de filtrado en JavaScript” y “Fundamentos de la manipulación del DOM”.

8.4 Reflexiones finales

La funcionalidad de ordenación es esencial para organizar datos y mejorar la experiencia del usuario.
Utiliza las técnicas presentadas en este artículo para potenciar tus proyectos.

Si tienes preguntas sobre la implementación de nuevas funciones o la ampliación de estos ejemplos,
no dudes en contactar a través de la sección de comentarios o el formulario de contacto.

El siguiente paso está en tus manos: ¡comienza a experimentar con el código hoy mismo!