Ver Mensaje Individual
  #2 (permalink)  
Antiguo 30/06/2015, 22:36
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 5 meses
Puntos: 977
Respuesta: Como ordenar ASC o DESC desde la página web?

Al ser código que se encuentra en el lado del cliente (pues ya fue procesado en el servidor y es solo la respuesta del mismo), deberías de hacerlo con un lenguaje del lado del cliente, como JavaScript que posee el método .sort() para ordenar arrays.

Al momento de seleccionar una de las opciones para realizar el ordenamiento, podrías tomar los valores de las opciones de la lista, agruparlos en un array y aplicar el ordenamiento con el método que te mencioné; luego, quitarías las opciones que se muestran en la lista y los reemplazarías por opciones cuyos valores irían en el orden en el que quedó el array recién ordenado.

Un ejemplo:

Código HTML:
Ver original
  1. <select id = "foo">
  2.     <option value = "1">Uno</option>
  3.     <option value = "2">Dos</option>
  4.     <option value = "3">Tres</option>
  5.     <option value = "4">Cuatro</option>
  6.     <option value = "5">Cinco</option>
  7.    
  8. <input type = "radio" name = "orden" value = "asc" /> Ascendente
  9. <input type = "radio" name = "orden" value = "desc" /> Descendente

Código Javascript:
Ver original
  1. document.addEventListener("DOMContentLoaded", function(){ //Cuando haya cargado el DOM
  2.     //Declaro variables y tomo elementos
  3.     var lista = document.querySelector("#foo"),
  4.         radios = document.querySelectorAll("[name=orden]"),
  5.         opciones = [], nuevaOpcion;
  6.  
  7.     //Recorro al conjunto de radio buttons
  8.     [].forEach.call(radios, function(radio){   
  9.         //Cuando seleccione un radio button, ejecuto una función
  10.         radio.addEventListener("click", function(){
  11.             //Si el array "opciones" está vacío (esto ocurrirá solo una vez)
  12.             if (!opciones.length){
  13.                 //Recorro la lista de opciones del <select>
  14.                 [].forEach.call(lista.options, function(opcion){
  15.                     //Y añado el valor y texto de cada opción al array "opciones"
  16.                     opciones.push({
  17.                         value: opcion.value,
  18.                         text: opcion.text
  19.                     });
  20.                 });
  21.             }
  22.        
  23.             //Quito las opciones del <select>
  24.             lista.options.length = 0;
  25.        
  26.             //Si el orden seleccionado es "ascendente"
  27.             if (this.value == "asc"){
  28.                 //Ordeno de manera ascendente a los valores del array "opciones"
  29.                 opciones.sort(function(a, b){
  30.                     return a.value - b.value;
  31.                 });
  32.             }
  33.             //Si el orden seleccionado es "descendente"
  34.             else{
  35.                 //Ordeno de manera descendente a los valores del array "opciones"
  36.                 opciones.sort(function(a, b){
  37.                     return b.value - a.value;
  38.                 });
  39.             }
  40.                
  41.             //Recorro el array "opciones"
  42.             opciones.forEach(function(opcion){
  43.                 //Y creo opciones que tendrán los valores almacenados
  44.                 nuevaOpcion = document.createElement("option");
  45.                 nuevaOpcion.value = opcion.value;
  46.                 nuevaOpcion.text = opcion.text;
  47.                 lista.add(nuevaOpcion); //Para, finalmente, añadirlos al <select>
  48.             });
  49.         }, false);
  50.     });
  51. }, false);

DEMO

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 30/06/2015 a las 22:47 Razón: Comentarios