0

Estuve intentando por unos dias que al usar la propiedad .sort para ordenar de mayor precio a menor pero en vez de recargar el contenido preexistente crea nuevas lineas y las pone (arriba o abajo dependiendo de los intentos y que codigos intente) pero dejando las anteriores aun en el DOM.

En las imagenes que les adjunto muestra como funciona y que resultado me da.

Este es el codigo que genera las tablas dinamicas antes de que se presione cualquier boton (para que aparezca tengo dentro de un $(document).ready un mostrarProductos(); :

const mostrarProductos = () => {
  $.getJSON(URLJSON, (respuesta) => {
    for (let z of respuesta) {
      productosv2.push(z);
    }
    for (let x of productosv2) {
      $("#fila").append(`
              <tr class="deleteProductos">
              <div class="card text-center" style="width: 18rem;" id='btnBorrarCarrito'>

                  <div class="card-body">
                      <input type="hidden" id="idProd" value="${x.id}"> </td>
                      <td class="card-title" id="${x.id}">${x.producto}</h2> </td>
                      <td class="card-text">$ ${x.precio}</p></td>
                      <div class="btn-group" role="group" aria-label="Basic mixed styles example">            
                          <td><button type="button" class="btn btn-success" onclick="agregarCarrito(${x.id})">Agregar</button></td>
                      </div>
                  </div>
              </div>
              </tr>
          `);
    }
    $("#fila").fadeIn("5000");
    
  });
};

Y despues este es el que lo ordena de mayor a menor y menor a mayor (Antes de cambiar el codigo del carrito (Habia hecho un carrito mediante un array pero este no me funciono y lo reforme a un json) me funcionaba correctamente con la propiedad de .innerHTML

Mayor a menor:

function respuestaClickExpensive() {
  $("#fila").html('');

  let productosordenados = productosv2.sort((a, b) => {
    if (a.precio > b.precio) {
      return -1;
    }
    if (a.precio < b.precio) {
      return 1;
    }
    return 0;
  });

  return productosordenados;


}

Menor a mayor:

function respuestaClickCheaper() {
  fila.innerHTML = "";
  let productosordenados = productosv2.sort((a, b) => {
    if (a.precio < b.precio) {
      return -1;
    }
    if (a.precio > b.precio) {
      return 1;
    }
    return 0;
  });

  return productosordenados;
}

Estos function de mayor a menor despues se engloban en una funcion principal con una animacion a parte y despues se manda al boton de esta manera (Los botones estan adentro de un document.ready que es el mismo que esta el de mostrarproductos(); )

  $("#cheaperbtn").click((e) => {
    filterCheaper();
  });

Imagen de como funciona el codigo

Imagen de como lo genera

En resumen, quiero que quede unicamente lo nuevo que es lo ordenado.

Intente lo siguiente y alguna cosa mas puede que me haya olvidado pero intentado.

$("#fila").empty();

Hacer una funcion a parte y despues llamarla que tenga la propiedad de empty()

Use Native JavaScript to generate the code.

$("#fila").remove(); Esto me eliminaba todo el contenido pero no me lo volvía a generar

Cambiar el tag de fila por uno que este en un orden superior (Es decir el colocar el div en el que esta adentro #fila) pero como obviamente no se me generaba de nuevo el div el contenido se eliminaba.

$("#fila tr").remove();


Otros intentos:

, en el boton que filtra de mayor a menor añadi lo siguiente:

function respuestaClickExpensive() {
  fila.replaceChildren();      // <--- aca es lo que me comentaste


  let productosordenados = productosv2.sort((a, b) => {
    if (a.precio > b.precio) {
      return -1;
    }
    if (a.precio < b.precio) {
      return 1;
    }
    return 0;
  });

  return productosordenados;


}

Y tambien probe a añadirlo directamente al boton la otra opcion

$(document).ready(function () {
  console.log("Estamos ready");

  // Botones - Filtrar Mas caro - Mas Barato
  $("#cheaperbtn").click((e) => {
    filterCheaper();
  });
    mostrarProductos();
  $("#expensivebtn").click((e) => {
    filterMoreExpensive();
    fila.replaceChildren();
  });

Pero no tuvo efecto, probe para ver si era algo incompatible o similar y en vez de usar fila coloque un div que estaba en una jerarquia superior y lo borro correctamente pero no lo genere.

adjunto el Fragmento del HTML tambien. Quizas el error esta en eso

       ´´     <div id="div11">
                <table class="table table-bordered container-fluid 
                            centergrid" 
              id="tableProduct">
          <tbody>
        <tr id="fila">
         </tr>
       </tbody>

     </table>

    </div> ´´ 

Lo que note, no se si es algo de relevancia, pero hice una prueba con la parte de.

fila.replaceChildren(); que le añadi dentro del parentesis mostrarProductos y me lo cargo fuera de la tabla.


@Orici Probe a hacer lo que me comentaste, en el boton que filtra de mayor a menor añadi lo siguiente:

function respuestaClickExpensive() {
  fila.replaceChildren();      // <--- aca es lo que me comentaste


  let productosordenados = productosv2.sort((a, b) => {
    if (a.precio > b.precio) {
      return -1;
    }
    if (a.precio < b.precio) {
      return 1;
    }
    return 0;
  });

  return productosordenados;


}

Y tambien probe a añadirlo directamente al boton la otra opcion

$(document).ready(function () {
  console.log("Estamos ready");

  // Botones - Filtrar Mas caro - Mas Barato
  $("#cheaperbtn").click((e) => {
    filterCheaper();
  });
    mostrarProductos();
  $("#expensivebtn").click((e) => {
    filterMoreExpensive();
    fila.replaceChildren();
  });

Pero no tuvo efecto, probe para ver si era algo incompatible o similar y en vez de usar fila coloque un div que estaba en una jerarquia superior y lo borro correctamente pero no lo genere.

Te adjunto el Fragmento del HTML tambien. Quizas el error esta en eso

       ´     <div id="div11">
  <table class="table table-bordered container-fluid centergrid" id="tableProduct">
    <tbody>
      <tr id="fila">
      </tr>
    </tbody>

  </table>

</div> ´

Lo que note, no se si es algo de relevancia, pero hice una prueba con la parte de.

fila.replaceChildren(); que le añadi dentro del parentesis mostrarProductos y me lo cargo fuera de la tabla.

1 respuesta 1

0

Entiendo que puedes ordenar correctamente las filas y generarlas en ese orden.

Si tienes una serie de filas en una tabla y al generar nuevas filas estas se adjuntan a las anteriores es porque no estas borrando el contenido original.

Debes obtener del DOM el contenedor padre de tus filas y añadir las nuevas filas de forma que reemplacen al contenido preexistente, por poner un ejemplo con Vainilla JS:

const table = document.querySelector('table#table_id');

// Para añadir una nueva fila:
table.appendChild(fileNode);

ésto tiene el mismo efecto que tratas de evitar, es decir estas añadiendo un elemento a tu tabla, no reemplazando el contenido original.

Para reemplazar todos los nodos hijos de tu nodo table:

// Sin argumentos se eliminan todos los hijos
container.replaceChildren(); 

También podrías añadir los nuevos nodos hijos directamente:

container.replaceChildren(...arrChildNodes); 

Otra forma de remover los hijos de un nodo, uno a uno:

while (table.firstChild) {
    table.firstChild.remove();
}
0

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.