0

tengo un buscador en tiempo real, el cual filtra países, marcas (entre otros). Quiero ordenar los resultados por su nombre o por su id, pero el método normal no me sirve.

Método tradicional que uso

if(isset($_POST['reg'])) {
    $q=$conexion->real_escape_string($_POST['reg']);
}

if($q==""){
    echo "Esperando búsqueda...";
    echo "<table><tr><td>Id</td><td>Nombre</td></tr></table>";
}

if ($q == "Marcas") {
        $orden = isset($_GET['ORD']) ? $_GET['ORD'] : "id";
        $query = "SELECT id, nombre_m FROM marcas ORDER By $orden";
        $buscarreg=$conexion->query($query);
        if ($buscarreg->num_rows > 0){
            $tabla.=
            "<table class='table'>
                <tr class='bg-primary'>
                        <td>
                        <a href='buscando.php?ORD=nombre_m'>
                            <img class='orden' src='../4.imagenes/up.png'/></a>
                        Id
                        </td>
                        <td>Nombre</td>
                </tr>";

Al hacer click en la imagen, vuelve a cargar la página, por lo que pierdo el valor de $_POST["reg"] y por algún motivo mi página pierde el css aplicado, solo se muestra el

if($q==""){
    echo "Esperando búsqueda...";
    echo "<table><tr><td>Id</td><td>Nombre</td></tr></table>";
}

No tengo idea de qué hacer :/

1
  • ¿Quieres que te filtre los valores ya cargados dentro de la tabla sin actualizar la pagina, no?
    – AgusBellas
    el 14 mar. 2020 a las 13:38

1 respuesta 1

0

Para ordenar los elementos sin tener que recargar la página puedes hacer uso de un script en JS, yo tengo esto, que es bastante "generico" y ordena por strings, asi que para los nombres con algo de retoque (añadirle el evento a un onclick en algun punto) si que te serviría.

                function sortTable(n) { //n equivale al numero de la columna a ordenar

                    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
                    table = document.getElementById("tabla"); //ID DE TU TABLA A ORDENAR
                    switching = true;

                    // Selecciona el tipo de orden asc o desc:
                    dir = "asc";

                    /* Loop hasta que no queden cambios por hacer: */
                    while (switching) {

                        // empieza diciendo que no se han hecho cambios:
                        switching = false;
                        rows = table.rows;

                        /* Loop por todas las columnas(excepto la primera, que contiene las cabeceras): */
                        for (i = 1; i < (rows.length - 1); i++) {

                            // Empieza diciendo que no hay cambios:
                            shouldSwitch = false;

                            /* Coge los dos elementos a comparar: */
                            x = rows[i].getElementsByTagName("td")[n];
                            y = rows[i + 1].getElementsByTagName("td")[n];

                            /* comprueba si las filas deberian cambiar de orden ya sea, asc o desc: */
                            if (dir == "asc") {

                                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {


                                    shouldSwitch = true;
                                    break;
                                }
                            } else if (dir == "desc") {
                                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                                    // If so, mark as a switch and break the loop:
                                    shouldSwitch = true;
                                    break;
                                }
                            }
                        }
                        if (shouldSwitch) {

                            /* si se completa hace el cambio y marca haberlo hecho: */
                            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                            switching = true;

                            // Cada vez que se hace incrementa el contador:
                            switchcount ++;
                        } else {

                            /* Si no se han hecho cambios y la direccion es "asc", cambia direccion a "desc" y lanza de nuevo el loop. */
                            if (switchcount == 0 && dir == "asc") {
                                dir = "desc";
                                switching = true;
                            }
                        }
                    }
                }

Espero que esto te sea de ayuda

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.