Hola a todos espero me puedan ayudar.! estoy trabajando con un datatable con jquery y la idea que el usuario vaya agregando filas con unos productos. pero lo que quiero que al llegar a una cantidad de filas se inicie la paginacion. Por ejemplo al ingresar 5 productos ya los proximos se vayan agregando en otra pagina del datatable. pero no logro que se ejecute la paginacion sino que sigue agregandose en la parte de abajo.! e inicializado el datatable y habilito paginación y esto me funciona cuando cargo de nuevo el DOM y si tengo datos pues los compagina pero no me funciona al momento que el usuario los va ingresando manualmente.!
Les muestro el codigo donde inicializo el datatable y donde cargo el producto en la nueva fila
$(document).ready(function () {
$("#tablaMaterial").DataTable({
language: {
decimal: ".",
emptyTable: "No hay información",
info: "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
infoEmpty: "Mostrando 0 a 0 de 0 Entradas",
infoFiltered: "(Filtrado de _MAX_ total entradas)",
thousands: ",",
lengthMenu: "Mostrar _MENU_ Entradas",
loadingRecords: "Cargando...",
processing: "Procesando...",
search: "Buscar:",
zeroRecords: "Sin resultados encontrados",
paginate: {
first: "Primero",
last: "Último",
next: "Siguiente",
previous: "Anterior",
},
},
paging: true,
pageLength: 3,
lengthChange: false
});
});
//funcion que me permite ir agregando filas a la tabla material
var contadorfilas = 1;
function agregarmaterial() {
// Obtener el valor de los inputs
var nombreProducto = document.querySelector("input[name='material']").value;
var cantidadProducto = document.querySelector(
"input[name='cantidadmaterial']"
).value;
if (!nombreProducto.trim() || !cantidadProducto.trim()) {
return;
}
var precio = parseFloat(document.getElementById("tdPrecio").innerText);
var anteriorcosto = parseFloat(
document.getElementById("costoMaterial").value
);
//agrego boton quitar
var btnQuitar = document.createElement("button");
btnQuitar.className = "btn btn-warning";
btnQuitar.innerHTML = "Quitar";
btnQuitar.onclick = function () {
quitarFila(this); // Pasamos el botón actual como referencia
};
//actualizo el precio total de costo material si es la primer fila
//solo envia el precio costo y sino suma el total del costo mas el costo del nuevo material
if (contadorfilas == 1) {
document.getElementById("costoMaterial").value = Math.round(precio);
} else {
document.getElementById("costoMaterial").value = Math.round(
precio + anteriorcosto
);
}
// Obtener el elemento tbody de la tabla
var tbody = document
.getElementById("tablaMaterial")
.getElementsByTagName("tbody")[0];
// Crear una nueva fila y celdas
var newRow = tbody.insertRow();
// Agregar las celdas a la fila
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
var cell5 = newRow.insertCell(4);
// Asignar contenido a las celdas
cell1.innerHTML = contadorfilas;
cell2.innerHTML = nombreProducto;
cell3.innerHTML = cantidadProducto;
cell4.innerHTML = precio;
cell5.appendChild(btnQuitar);
contadorfilas++;
// Limpiar los campos de entrada después de agregar
document.querySelector("input[name='material']").value = "";
document.querySelector("input[name='cantidadmaterial']").value = "";
document.getElementById("tdPrecio").innerText = "";
actualizaPrecio();
cargarTabla()
}