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": "« 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 »",
"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.