Skip to main content
Publicación cerrada como "No adecuado para este sitio" por Candid Moe, padaleiana, Rafael Acosta
se añadieron 98 caracteres en el cuerpo
Origen Enlace

Les muestro el codigo donde inicializo el datatable y donde cargo el producto en la nueva fila

Les muestro el codigo donde inicializo el datatable y donde cargo el producto en la nueva fila

se añadieron 3348 caracteres en el cuerpo
Origen Enlace
  $(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()
}
  $(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()
}
Origen Enlace

paginacion Datatable con jquery

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.!