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:
- Para convertirlo a minúsculas he utilizado el método
toLowerCase(). - Para la eliminación de acentos me he basado en una función expuesta en dsite – Buscar y ordenar texto con acentos en TinyTable v3 (enlace externo)
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: