No ejecuta la petición AJAX al cargar la página porque está dentro de una función anónima y solo se ejecuta por los eventos a los que fue asignada. Necesitas:
- Definir la función aparte
- Al cargar el DOM:
- Asignar el evento a los checkboxes, pero ejecutando la función
- Ejecutar la función para obtener productos desde que carga la página
- Para la paginación:
- Crear variable global para la página que se debe mostrar
- Incluir la página en la petición
- Delegar evento onclick en enlaces de paginación
// Variable global para asignar página
let curPage = 1;
// Ejecutar hasta que se haya cargado el DOM
$(function() {
// Asignar evento a checkboxes
$('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
cargarProductos();
});
// Delegar evento onclick para enlaces de paginación
$('#filtrados').on('click', '.page-link', function(e) {
// Evitar comportamiento normal de enlace
e.preventDefault();
// Actualizar página que se debe mostrar
curPage = $(this).text();
// Ejecutar petición AJAX
cargarProductos();
});
// Ejecutar cuando carga el DOM
cargarProductos();
});
// Función para petición AJAX
function cargarProductos() {
$value= $("#search").val();
var categoria = $('[name="categoria[]"]:checked').map(function(){
return this.value;
}).get();
var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
return this.value;
}).get();
var marca = $('[name="marcas[]"]:checked').map(function(){
return this.value;
}).get();
var genero = $('[name="genero[]"]:checked').map(function(){
return this.value;
}).get();
var url = 'productos/filtros';
$.ajax({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
type: "POST",
url: url,
data: {'categoria': categoria,
'subcategoria': subcategoria,
'marca': marca,
'genero': genero,
'search': $value,
// Incluir número de página que se va a cargar
'page': curPage
},
beforeSend: function(){
$("#filtrados").html("<div id='loader'></div>")
},
timeout:500000,
success: function (resultado){
setTimeout(function(){
// Asignar contenido HTML
$("#filtrados").html(resultado);
}, 1000);
},
error: function(e) { $("#filtrados").html("Sucedió un error!") }
});
};