0

Estoy trabajando sobre laravel 8, cuando busco unos productos por controlador y los pagino, me cargan los productos bien.

Ahora debo cargar los productos a travez de ajax, por cuestion de varios menus (filtros) en la pagina. El ajax funciona bien, y cuando son pocos productos, funciona ok, el problema es que algunos filtros me traen mas de mil productos, y cuando esto sucede toda la pagina se bloquea tratanto de procesar estos datos. me hace falta la paginacion, pero no se como hacerla en ajax.

Podria alguien darme una luz de como deberia paginar los resultados de una consulta ajax? tengo que mostrar paginas de 100 productos.

Este es mi ajax, en el que hago una consulta, y este me devuelve los registros de la bd. por cada registro, yo me creo todo el html del producto. y por medio de hinnerHTMl se lo agrego al contenedor de los productos. Cuando los producto son pocos, funciona muy bien. pero cuando son demasiadas la pagina colapsa.

 $.ajax(
                    {
                        url: "{{ route('productos.cat.ambas') }}",
                        type: "POST",
                        data: {"_token": "{{ csrf_token() }}", id: id1, id2: id2}
                    })
                    .done(function (data) {
                        document.getElementById("productoJs").innerHTML = "";
                        $.each((data), function (i, item) {
                            var htmlSubCat = '<div class="col-sm-2">\n\
                                <div class="product-image-wrapper">\n\
                                <div class="single-products" style="height: 295px;">\n\
                                <div class="productinfo text-center">\n\
                                <img src="' + item['ruta_img'] + '" style="height: 90px; width: 120px;" alt=""/>\n\
                                <h2>$ ' + item['valor_producto_minorista'] + '</h2>\n\
                                <p>' + item['descrip_producto'] + '</p>\n\
                                <a name="producto' + item['id_producto'] + '" style="border-radius: 4px; color: #fff;" onclick="agregar(this)"\n\
                                                   class="btn btn-primary add-to-cart">\n\
                                                    <i class="fa fa-shopping-cart">\n\
                                                    </i>Agregar\n\
                                                </a>\n\
                            </div>';

                            document.getElementById("productoJs").innerHTML += htmlSubCat;
                        });
                    })
                    .fail(function (data) {
                        console.log(data);
                    })

y este es el controlador que me regresa la informacion:

public function productoCatAmbas(Request $request){
        $idCat = $request->id;
        $idSubCat = $request->id2;
        

        $dataProducto = Producto::where('producto.categoria', $idCat)->where('producto.descripcion', $idSubCat)->get();

        return $dataProducto;

    }

Actualizacion ******************************************

En el controlador he paginado como me dijeron, con " paginate "

public function productoCatAmbas(Request $request){
            $idCat = $request->id;
            $idSubCat = $request->id2;
            
    
            $dataProducto = Producto::where('producto.categoria', $idCat)->where('producto.descripcion', $idSubCat)->paginate();
    
            return $dataProducto;
    
        }

y en el ajax le he agregado esto:

$.ajax({
                        "total": 50,
                        "per_page": 15,
                        "current_page": 1,
                        "last_page": 4,
                        "first_page_url": "http://laravel.app?page=1",
                        "last_page_url": "http://laravel.app?page=4",
                        "next_page_url": "http://laravel.app?page=2",
                        "prev_page_url": null,
                        "path": "http://laravel.app",
                        "from": 1,
                        "to": 15,
                            url: "{{ route('productos.cat.ambas') }}",
                            type: "POST",
                            data: {
                                "_token": "{{ csrf_token() }}",
                                id: id1,
                                id2: id2
                            }
                        })
                        .done(function(data) {

                            document.getElementById("productoJs").innerHTML = "";
                            $.each((data), function(i, item) { .......

Pero no me imprimen las imagenes, y en consola me marca el siguiente error:

Uncaught TypeError: Cannot read property 'ruta_img' of null

cuando veo la data que me trae, me la trae asi:

como podria yo ahora entonces acceder a cada atributo?

{
    "current_page": 1,
    "data": [
        {
            "id_producto": 1,
            "posi": null,
            "cod_producto": "100020",
        "ruta_img": "...."
            .....
        },
        {
            "id_producto": 2,
            "posi": null,
            "cod_producto": "101840",
           "ruta_img": "...."
            .....
        },
        {
            "id_producto": 3,
            "posi": null,
            "cod_producto": "102100",
           "ruta_img": "...."
        },
        {
            "id_producto": 4,
            "posi": null,
            "cod_producto": "103740",
           "ruta_img": "...."
        },
        {
            "id_producto": 5,
            "posi": null,
            "cod_producto": "105910",
            "ruta_img": "...."
        },
        {
            "id_producto": 6,
            "posi": null,
            "cod_producto": "106000",
            "ruta_img": "...."
        },
        {
            "id_producto": 7,
            "posi": null,
            "cod_producto": "106470",
            "ruta_img": "...."
        }
    ],
    "first_page_url": "http://localhost/..../productoCatSola?page=1",
    "from": 1,
    "last_page": 283,
    "last_page_url": "http://localhost/..../productoCatSola?page=283",
    "links": [
        {
            "url": null,
            "label": "&laquo; Previous",
            "active": false
        },
        {
            "url": "http://localhost/..../productoCatSola?page=1",
            "label": "1",
            "active": true
        },
        {
            "url": "http://localhost/..../productoCatSola?page=2",
            "label": "2",
            "active": false
        },
       
        .
    .
    .
    .
    .
        {
            "url": "http://localhost/...../productoCatSola?page=10",
            "label": "10",
            "active": false
        },
        {
            "url": null,
            "label": "...",
            "active": false
        },
        
        {
            "url": "http://localhost/..../productoCatSola?page=2",
            "label": "Next &raquo;",
            "active": false
        }
    ],
    "next_page_url": "http://localhost/..../productoCatSola?page=2",
    "path": "http://localhost/...../productoCatSola",
    "per_page": 15,
    "prev_page_url": null,
    "to": 15,
    "total": 4239
}

yo antes accedia, dentro del each. como item['ruta_img'], y ahora no sabria como acceder. como puedo hacerlo? gracias.

2
  • Haz lo mismo que una paginacion normal pero mantienes el search en el js, puedes guardar la variable de los datos de busqueda y los vas concatenando con la pagina Commented el 12 jun. 2021 a las 0:11
  • @NicolasAldana no te entendí amigo, perdon. podrias darme algun ejemplo que yo pueda estudiar? te lo agradezco mucho.
    – wil
    Commented el 13 jun. 2021 a las 20:16

1 respuesta 1

0

Para que le entregue la respuesta paginada debes utilizar Producto::paginate()... esto te entrega en la respuesta todos los parámetros para poder armar los link a las paginas mas los datos de la lista, ejemplo de respuesta:

{
   "total": 50,
   "per_page": 15,
   "current_page": 1,
   "last_page": 4,
   "first_page_url": "http://laravel.app?page=1",
   "last_page_url": "http://laravel.app?page=4",
   "next_page_url": "http://laravel.app?page=2",
   "prev_page_url": null,
   "path": "http://laravel.app",
   "from": 1,
   "to": 15,
   "data":[
        {
            // Record...
        },
        {
            // Record...
        }
   ]
}
1
  • ya lo intenté, y creo que lo estoy logrando, pero ahora en la data que me trae, no puedo acceder de manera correcta, no se como hacerlo.
    – wil
    Commented el 13 jun. 2021 a las 22:40

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.