Cookies en Outbook

Esta web utiliza cookies propias para ofrecer una mejor experiencia. Al navegar, aceptas dichas cookies.
  • Más información acerca de las cookies

Outbook

UI-Dev & more

Javascript / Jquery: Ordenación alfabética de elementos

He preparado un plugin de Jquery (un poco rudimentario) para ordenar elementos de lista de forma alfabética.

Para hacer el script me he basado en una función expuesta en StackOverflow – How may I sort a list alphabetically using jQuery? (enlace externo, en inglés).

En la función original se genera un array con los elementos de lista y se le aplica el método sort() para ordenarlos alfabéticamente.

Una vez terminado el plugin surgía un problema: Si la cadena de texto del elemento ordenable empieza con una letra minúscula o con acento, dicho elemento aparecía al final. Para solventarlo he utilizado un array multidimensional, que contiene la cadena de texto original, y una variación convertida a minúsculas y sin acentos:

Código HTML

Ver ejemplo (abre en ventana nueva)

HTML del listado:

<ul id="listado">
  <li class="elemento">Madrid</li>
  <li class="elemento">Valladolid</li>
  <li class="elemento">Palencia</li>
  <li class="elemento">Álava</li>
  <li class="elemento">Lérida</li>
  <li class="elemento">burgos</li>
  <li class="elemento">Cantabria</li>
</ul>

Aunque en el ejemplo se está haciendo con una lista desordenada también se puede hacer con otros elementos.

HTML de los enlaces de ordenación:

<p><a href="#" id="ordenar1">Ordenar A-Z</a></p>
<p><a href="#" id="ordenar2">Ordenar Z-A</a></p>

Código Javascript

Asignación de eventos a los enlaces

$('#ordenar1').ordenacion();
$('#ordenar2').ordenacion({delReves:true});

La opción delReves (valores true o false) determina si la ordenación es descendente o no.

Código del plugin Jquery:

(function($){
  $.fn.ordenacion = function(options){
    var defaults = { // Opciones por defecto
      contenedor: '#listado'
      ,elementoOrdenable: '.elemento'
      ,delReves: false
    }
    var op = $.extend(defaults, options);

    return this.each(function(){
      var enlace = $(this);
      enlace.click(function (event) {
        event.preventDefault();
        ordenar();
      });
      
    });
    
    function ordenar () {
      var contenedor = $(op.contenedor).eq(0);
      var ordenables = contenedor.find(op.elementoOrdenable);
      
      var vals = [];
      
      ordenables.each(function () {
        var html = $(this).html();
        var htmlCambiado = html.toLowerCase();
        vals.push([tildes(htmlCambiado),html]);
      });
      
      vals.sort();
      if(op.delReves) {vals.reverse();}
      
      ordenables.each(function (i) {
        $(this).html(vals[i][1]);
      });
    }
    
    function tildes(t){
      var ts = '';
      for(var i=0;i<t.length;i++) {
        var c = t.charCodeAt(i);
        if(c >= 224 && c <= 230) {ts += 'a';}
        else if(c >= 232 && c <= 235) {ts += 'e';}
        else if(c >= 236 && c <= 239) {ts += 'i';}
        else if(c >= 242 && c <= 246) {ts += 'o';}
        else if(c >= 249 && c <= 252) {ts += 'u';}
        else {ts += t.charAt(i);}
      }
    return ts;
    };
  }
})(jQuery);

Saber más

Enlaces externos:

Publicado

Categorías: