PHP OO Como ordenar ASC o DESC desde la página web?

[AleeMarin]

Buenas Gente!

Tengo el siguiente código hecho por mi para un filtrado de registros traidos desde una base de datos:

Código PHP:

 <div id="filtros"> 
    <form  action="index.php" method="GET" id="busqueda" class="busqueda"> 
                         
                        <p><b>Tipo de espect&aacuteculo: </b> &nbsp;&nbsp;  
                        <select name="selecttipo" > 
                            <?php     
                            include("./includes/conexion.php"); 
                            $link=conectar(); 
                            $r=mysqli_query($link,'SELECT te.idtipoespectaculo, te.tipoespectaculo FROM tiposespectaculos as te ORDER BY te.idtipoespectaculo'); 
                            ?> 
                            <option  value="0"> Todos</option> 
                            <?php 
                            while($fila = mysqli_fetch_array($r)){ 
                            ?> 
                                <option value="<?php echo $fila['idtipoespectaculo'] ?>" <?php if(isset($_GET['selecttipo']) && $_GET['selecttipo']==$fila['idtipoespectaculo'] ){ echo 'selected'; } ?>> <?php echo$fila['tipoespectaculo'] ?></option> 
                            <?php } ?> 
                        </select>&nbsp;&nbsp;&nbsp; 
                        <b>Sala:</b>&nbsp;&nbsp;         
                        <select name="selectsala"> 
                            <?php     
                            $r=mysqli_query($link,'SELECT s.idsala, s.nombre FROM salas as s ORDER BY s.idsala'); 
                            ?> 
                            <option  value="0"> Todas</option> 
                            <?php 
                            while($fila = mysqli_fetch_array($r)){ 
                            ?> 
                                <option value="<?php echo $fila['idsala'] ?>"<?php if(isset($_GET['selectsala']) && $_GET['selectsala']==$fila['idsala']) { echo 'selected'; } ?> ><?php echo$fila['nombre'] ?></option> 
                            <?php } ?> 
                        </select>&nbsp;&nbsp;&nbsp; 
                        <b>Fecha:</b>&nbsp;&nbsp; 
                        <input type="date" name="fecha"></input> 
                         
                        <p><b>Ordenar por: </b>&nbsp; 
                 
                        <input type="radio" name="orden" value="titulo" <?php if(isset($_GET['orden']) && $_GET['orden']=='titulo'){ echo 'checked'; } ?>>Nombre&nbsp;&nbsp;&nbsp; 
                        <input type="radio" name="orden" value="fecha"  <?php if(!isset($_GET['orden'])){echo 'checked';} else if($_GET['orden']=='fecha'){ echo 'checked';} ?>> Fecha </p> 
                        <input type="submit" value="Filtrar" name="buscar" > 
            </form>     
</div>  

Quería saber como puedo hacer para a ese filtrado agregarle dos "radio button" (o una lista desplegable de opciones, o lo que sea), donde el usuario que visita la página pueda ordenar los resultados Ascendente o Descendente (predeterminadamente, los resultados traidos vendrian con orden ascendente).

Desde ya, gracias!
Saludos!

[Alexis88]

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:

<select id = "foo">
    <option value = "1">Uno</option>
    <option value = "2">Dos</option>
    <option value = "3">Tres</option>
    <option value = "4">Cuatro</option>
    <option value = "5">Cinco</option>
</select>
    
<input type = "radio" name = "orden" value = "asc" /> Ascendente
<input type = "radio" name = "orden" value = "desc" /> Descendente
 

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){ //Cuando haya cargado el DOM
    //Declaro variables y tomo elementos
    var lista = document.querySelector("#foo"),
        radios = document.querySelectorAll("[name=orden]"),
        opciones = [], nuevaOpcion;
 
    //Recorro al conjunto de radio buttons
    [].forEach.call(radios, function(radio){    
        //Cuando seleccione un radio button, ejecuto una función
        radio.addEventListener("click", function(){
            //Si el array "opciones" está vacío (esto ocurrirá solo una vez)
            if (!opciones.length){
                //Recorro la lista de opciones del <select>
                [].forEach.call(lista.options, function(opcion){
                    //Y añado el valor y texto de cada opción al array "opciones"
                    opciones.push({
                        value: opcion.value,
                        text: opcion.text
                    });
                });
            }
        
            //Quito las opciones del <select>
            lista.options.length = 0;
        
            //Si el orden seleccionado es "ascendente"
            if (this.value == "asc"){
                //Ordeno de manera ascendente a los valores del array "opciones"
                opciones.sort(function(a, b){
                    return a.value - b.value;
                });
            }
            //Si el orden seleccionado es "descendente"
            else{
                //Ordeno de manera descendente a los valores del array "opciones"
                opciones.sort(function(a, b){
                    return b.value - a.value;
                });
            }
                
            //Recorro el array "opciones"
            opciones.forEach(function(opcion){
                //Y creo opciones que tendrán los valores almacenados
                nuevaOpcion = document.createElement("option");
                nuevaOpcion.value = opcion.value;
                nuevaOpcion.text = opcion.text;
                lista.add(nuevaOpcion); //Para, finalmente, añadirlos al <select>
            });
        }, false);
    });
}, false);
 

DEMO

Saludos