How to do a "See All" from a list generated dynamically with jquery?

0

Good morning.

I currently generate a list as follows:

var lista_productos_elegir = $('.lista_productos_elegir');
                        valCarrito = response.data;
                           $.each(valCarrito, function (i) {
                                $('<li/>').addClass('swipeout swipeout_productos1')
                                    .append($('<div/>').addClass('swipeout-content item-content')
                                        .append($('<div/>').addClass('item-media')
                                            .append('<img src="' + valCarrito[i].Url + '" onerror="this.onerror=null;" alt="" width="40" height="60" />'))
                                        .append($('<div/>').addClass('item-inner')
                                            .append($('<div/>').addClass('item-text item-title-row')
                                                /*.append('<input type="number" class="add_material_impreso" value="0" min="0" placeholder="Ingrese cantidad">')*/
                                                  .append($('<div tyle="border-radius: 1px;"/>').addClass('chip chip-small').append('<div class="chip-label"><span class="product-quantity">' + valCarrito[i].Cantidad + '</span></div>'))
                                                  .append($('<div style="background: rgba(0, 0, 0, 0);"/>').addClass('chip chip-small chip-small-nuevo').append('<div class="chip-label"><button class="sumarProducto1 button-list-swipeout">+</button></div>'))
                                                  .append($('<div style="background: rgba(0, 0, 0, 0);"/>').addClass('chip chip-small').append('<div class="chip-label"><button class="restarProducto1 button-list-swipeout">-</button></div>'))    
                                                  .append('<div class="item-after" data-unit-price="' + valCarrito[i].PrecioSocio + '"><span class="product-amount" style="font-size: 12px;">' + valCarrito[i].PrecioSocio.toLocaleString(undefined, {minimumFractionDigits: 2}) + '</span></div>')
                                            )
                                            .append($('<div/>').addClass('item-title-row')
                                                .append($('<div style="font-size: 12px;"/>').addClass('item-title').append(valCarrito[i].Codigo_Inventario + " - " + valCarrito[i].Descripcion))
                                                .append('<div class="codInventario_material" style="display:none">' + valCarrito[i].Codigo_Inventario + '</div>')
                                                .append('<div class="tipo_material" style="display:none">' + valCarrito[i].Tipo + '</div>')
                                                .append('<div class="tipo_costo_material" style="display:none">' + valCarrito[i].TipoCosto + '</div>')
                                                .append('<div class="tipo_seleccion" style="display:none">' + valCarrito[i].tipo_seleccion + '</div>')
                                                .append('<div class="preciosocio_material" style="display:none">' + valCarrito[i].PrecioSocio + '</div>')
                                                .append('<div class="volumenNegocio_material" style="display:none">' + valCarrito[i].VolumenNegocio + '</div>')
                                                .append('<div class="cantidadProducto_material" style="display:none">' + valCarrito[i].Cantidad + '</div>')
                                            )
                                        )
                                    )
                                    .appendTo(lista_productos_elegir);
                            });

From this list shows about 30 records.

How can I do so that at the beginning I show 10 records and there is a "See more" button and automatically shows the remaining 20 records and likewise there is a "See less" button to return to the initial 10 records.

This image shows how dynamic content generates.

    
asked by JG_GJ 26.09.2018 в 17:39
source

1 answer

0

You can do what you need by using a flag variable to take control of whether you show 10 or all the products. I leave the example in case you want to do it this way, even though it is best to make use of datatables as recommended by @alanfcm

var response = {
    data: [
        {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }, {
            Url: "#",
            Cantidad: 12,
            PrecioSocio: 12.59,
            Codigo_Inventario: "123456",
            Descripcion: "Test",
            Tipo: "Test",
            TipoCosto: "Test",
            tipo_seleccion: "Test",
            VolumenNegocio: "Test"
        }
    ]
};

var lista_productos_elegir = $('.lista_productos_elegir');
var valCarrito = response.data;
var vermas = $(".vermas"); // Obtenemos la referencia al botón que servirá para ver mas productos
var vermastoggle = 0; // Bandera para saber si se muestran 10 o todos los productos

imprimir_productos(10); // Llamamos a la función que imprimirá los productos y por default le decimos que imprima 10.

vermas.on("click", function(){ // Evento que detecta cuando le damos click al botón ver mas
  if(vermastoggle) { // si la vandera es verdadera o 1
    $(this).text("Ver más"); // Ponemos el texto en ver mas
    imprimir_productos(10); // imprimimos solamente 10 productos
    vermastoggle = 0; // ponemos la bandera en 0 o false
  } else { // Si la bandera esta en 0 o false
    $(this).text("Ver menos"); // Ponemos el texto en ver menos
    imprimir_productos(-1); // Imprimimos todos los productos
    vermastoggle = 1; // Ponemos la bandera en 1 o true
  }
});

function imprimir_productos(limite) { // function para imprimir los productos
  lista_productos_elegir.html(""); // vaciamos la lista
  $.each(valCarrito, function (i) { 
      if(i===limite) return false; // Si el contador i es igual al limite paramos el each
      $('<li/>').addClass('swipeout swipeout_productos1')
          .append($('<div/>').addClass('swipeout-content item-content')
              .append($('<div/>').addClass('item-media')
                  .append(i + '<img src="' + valCarrito[i].Url + '" onerror="this.onerror=null;" alt="" width="40" height="60" />'))
              .append($('<div/>').addClass('item-inner')
                  .append($('<div/>').addClass('item-text item-title-row')
                      /*.append('<input type="number" class="add_material_impreso" value="0" min="0" placeholder="Ingrese cantidad">')*/
                          .append($('<div tyle="border-radius: 1px;"/>').addClass('chip chip-small').append('<div class="chip-label"><span class="product-quantity">' + valCarrito[i].Cantidad + '</span></div>'))
                          .append($('<div style="background: rgba(0, 0, 0, 0);"/>').addClass('chip chip-small chip-small-nuevo').append('<div class="chip-label"><button class="sumarProducto1 button-list-swipeout">+</button></div>'))
                          .append($('<div style="background: rgba(0, 0, 0, 0);"/>').addClass('chip chip-small').append('<div class="chip-label"><button class="restarProducto1 button-list-swipeout">-</button></div>'))    
                          .append('<div class="item-after" data-unit-price="' + valCarrito[i].PrecioSocio + '"><span class="product-amount" style="font-size: 12px;">' + valCarrito[i].PrecioSocio.toLocaleString(undefined, {minimumFractionDigits: 2}) + '</span></div>')
                  )
                  .append($('<div/>').addClass('item-title-row')
                      .append($('<div style="font-size: 12px;"/>').addClass('item-title').append(valCarrito[i].Codigo_Inventario + " - " + valCarrito[i].Descripcion))
                      .append('<div class="codInventario_material" style="display:none">' + valCarrito[i].Codigo_Inventario + '</div>')
                      .append('<div class="tipo_material" style="display:none">' + valCarrito[i].Tipo + '</div>')
                      .append('<div class="tipo_costo_material" style="display:none">' + valCarrito[i].TipoCosto + '</div>')
                      .append('<div class="tipo_seleccion" style="display:none">' + valCarrito[i].tipo_seleccion + '</div>')
                      .append('<div class="preciosocio_material" style="display:none">' + valCarrito[i].PrecioSocio + '</div>')
                      .append('<div class="volumenNegocio_material" style="display:none">' + valCarrito[i].VolumenNegocio + '</div>')
                      .append('<div class="cantidadProducto_material" style="display:none">' + valCarrito[i].Cantidad + '</div>')
                  )
              )
          )
          .appendTo(lista_productos_elegir);
  });
}
.lista_productos_elegir {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.lista_productos_elegir li {
  display: block;
  margin-bottom: 15px;
}

.item-content .item-media,
.item-content .item-inner {
  display: inline-block;
  vertical-align: middle;
}

.item-content .item-media {
  max-width: 60px;
  width: 100%;
  height: 60px;
  background-color: #ddd;
  margin-right: 8px;
}

.item-content .item-inner {
  width: calc(100% - 68px)
}

.item-content .item-inner .item-title-row {
  width: 100%;
  margin-bottom: 4px;
}

.item-content .item-inner .item-title-row div {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="lista_productos_elegir"></ul>
<button class="vermas">Ver más</button> <!-- Botón que nos permitirá ver mas productos -->

Greetings!

    
answered by 26.09.2018 в 18:16