Estoy agregando en mi function rellenar()
botones a un datatable para incrementar y disminuir un valor específico de la fila. Llamo al método del botón Agregar()
que espera un clic. En este método uso Ajax nuevamente para traer la nueva información de la tabla desde un controlador.
Esto funciona solo la primera vez, me regresa mi objeto y puedo agregarlo llamando al primer método rellenar()
. Pero la segunda vez, al llamar al método del botón, el valor de la fila me regresa undefined
Primero llamo a este método que inicializa listas y llama a mi método rellenar()
:
$("#Articulo").on("click", function (e) {
e.preventDefault();
articular();
});
var articular = function () {
$listaIdVenta = $("#IdVentas");
$.ajax({
url: "/veVentas/GetDatosVenta",
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {
IdRegistro: $("#IdRegistro").val(),
IdSucursal: $("#IdSucursal").val(),
IdUsuario: $("#IdUsuario").val(),
FechaVenta: $("#FechaVenta").val(),
Subtotal: $("#Subtotal").val(),
IEPS: $("#IEPS").val(),
IVA: $("#IVA").val(),
Total: $("#Total").val(),
Folio: $("#Folio").val(),
Productos: $("#Productos").val(),
Estatus: $("#Estatus").val(),
Tipo: $("#Tipo").val(),
TipoPago: $("#TipoPago").val(),
IdRegistroDetalle: $("#IdRegistroDetalle").val(),
IdVentasDetalle: $("#IdVentasDetalle").val(),
IdProductoDetalle: $("#IdProductoDetalle").val(),
PrecioUniDetalle: $("#PrecioUniDetalle").val(),
IEPSUniDetalle: $("#IEPSUniDetalle").val(),
IVAUniDetalle: $("#IVAUniDetalle").val(),
CantidadDetalle: $("#CantidadDetalle").val(),
EstatusDetalle: $("#EstatusDetalle").val(),
DescuentoDetalle: $("#DescuentoDetalle").val(),
},
traditional: true,
success: function (result) {
//console.log(result);
let vali = result;
if (result[0] == 1) {
$(".toast").addClass("Rechazado");
$(".toast").html(result[1]);
} else {
$(".toast").addClass("Aceptado");
$("#Productos").val(result["productos"]);
$(".toast").html(result["item1"]["value"][1]);
//console.log(result['item2']['value'][0]['idVentas']);
//console.log(result);
var precio;
$("#ventaid").text(
"Agregar Productos " + result["item2"]["value"][0]["idVentas"]
);
rellenar(result["item2"]["value"]);
}
$(".toast").toast("show");
},
error: function () {
$(".toast").toast("show");
},
});
};
Luego en rellenar()
, recibo el objeto y hasta aquí todo bien. Agrego los botones en defaultcontent al final, llamo al método del primer botón y le envío tbody
y la tabla:
function rellenar(datos) {
CalcularTotal(datos);
var table = $("#dataTable").DataTable({
destroy: true,
data: datos,
columns: [
//{ "data": "idRegistro" },
//{ "data": "idVentas" },
//{ "data": "idProducto" },
{ data: "producto" },
{ data: "precioUni" },
{ data: "iepsUni" },
{ data: "ivaUni" },
{ data: "cantidad" },
{ data: "estatus" },
{ data: "descuento" },
{
defaultContent:
"<button type='button'id='sumar' class='plus btn btn-success'>+</button><button type='button' class='minus btn btn-warning'>-</button><button type='button' class='delete btn btn-danger'>X</button>",
},
//asp - action='Sumar' asp - route - id='@item.IdProducto'
//{ "defaultContent": "<button asp-action='EditTemporal' asp-route-id='@item.IdProducto' class='dropdown-item'>+</button><button asp-action='EditTemporal' asp-route-id='@item.IdProducto' class='dropdown-item' > -</button ><button asp-action='EliminarTempDetalle' asp-route-id='@item.IdProducto' class='dropdown-item'>Eliminar</button>"}
],
dom: "Bfrtip",
buttons: [
{
extend: "excel",
text: "<i ></i>",
className: "btn btn-success btn-sm icon-excel3",
exportOptions: {
columns: "th:not(:last-child)",
},
},
{
extend: "pdf",
text: "<span ></span>",
className: "btn btn-danger btn-sm icon-pdf3",
exportOptions: {
columns: "th:not(:last-child)",
},
},
],
language: {
lengthMenu: "Mostrar _MENU_ por página",
zeroRecords: "Ninguna coincidencia",
info: "Página _PAGE_ de _PAGES_",
infoEmpty: "No hay registros disponibles",
infoFiltered: "(_MAX_ registros)",
sSearch: "Buscar",
oPaginate: {
sFirst: "Primero",
sPrevious: "Anterior",
sNext: "Siguiente",
sLast: "Último",
},
},
});
Agregar("#dataTable tbody", table);
}
Todo esto llega a este método, donde con Ajax mando mi id
para saber cuál incrementar y me regresa la lista entera:
var Agregar = function (tbody, table) {
$(tbody).on("click", "button.plus", function () {
var datos = table.row($(this).parents("tr")).data();
console.log("agregar");
console.log(datos);
//$('#IdProductoDetalle').val(datos['idProducto']);
//$('#CantidadDetalle').val(1);
//articular();
$.ajax({
url: "/veVentas/Sumar",
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {
idProducto: datos["idProducto"],
},
traditional: true,
success: function (result) {
console.log("result");
console.log(result);
console.log("result 0");
console.log(result[0]);
rellenar(result);
//return result;
},
error: function () {
$(".toast").toast("show");
},
});
});
};
Aquí vuelvo a llamar a mi método rellenar
mandándole la lista que recibí y funciona. Pero solo la primera vez, donde sí recibo la información de la fila, pero la segunda vez regresa undefined
.