1

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()
}
1
  • Hola Mlemus, bienvenido/a a Stack Overflow en español. Te recomiendo realizar el recorrido de bienvenida para que sepas como funciona la plataforma y de paso ganar tu primer medalla. Por otro lado, ¿podrías editar tu pregunta y compartir el código que has desarrollado donde podamos reproducir el error? No es necesario que pongas todo, solo un ejemplo mínimo verificable
    – Marcos
    Commented el 21 ago. a las 17:31

1 respuesta 1

1

En vez de insertarlo puedes utilizar un método que tiene DataTables ya definido para añadir filas nuevas.

/* Resto del código anterior */

if (contadorfilas == 1) {
    document.getElementById("costoMaterial").value = Math.round(precio);
} else {
    document.getElementById("costoMaterial").value = Math.round(
        precio + anteriorcosto
    );

}

$("#tablaMaterial").row.add([
    //Aquí van las filas que añadirías
    contadorfilas,
    nombreProducto,
    ...
]);

contadorfilas++;

/* Resto de tu código */

Esto te serviría para que no uses el innerHTM, appends y no tengas que recargar el DOM.

1
  • 1
    Si, muchas gracias esto soluciono por completo el problema que tenia
    – Mlemus
    Commented el 22 ago. a las 3:57

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.