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();
});
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.