Utilizo datatables server-side primero para traerlo de la bd y despues agregar ese producto seleccionado a una clase para irse agregando los productos que se deseen. Esto ya lo pude hacer, mi problema es que ahora quiero deshabilitar el boton que agrega el producto seleccionado y lo que e conseguido es que me deshabilita todos los botones de todos los productos. Les comparto el codigo que tengo hasta ahora:
var tablaCreapedidos = $(".tablaCreapedidos").DataTable({
responsive: true,
deferRender: true,
processing: true,
serverSide: true,
ajax: "ajax/serversideCreapedido.php",
columnDefs: [{
"targets": 4,
"data": null,
"render": function (data, type, row){
'use strict';
return '<div class="btn-group"><button class="btn btn-info btn-sm btnAgregarProducto" id="' + row[0] + '"><i class="fas fa-plus-circle"></i></button></div>';
}
},
{
"targets": 3,
"render": function (data, type, row) {
'use strict';
if (data === "") {
return '<img src="vista/img/productos/default/producto.png" class="img-thumbnail" width="40px">';
} else {return '<img src="' + data + '" class="img-thumbnail" width="40px">'; }
}
}],
language: {
url: 'plugins/datatables/Spanish.json'
}
});
Lo anterior es para iniciar la tabla, ahora les muestro donde traigo el producto:
i$(document).on("click", ".btnAgregarProducto", function () {
'use strict';
var idProdpe = $(this).attr("id");
var datos = new FormData();
datos.append("idProduct", idProdpe);
$.ajax({
url: 'controlador/traerProducto.php',
method: "POST",
data: datos,
cache: false,
contentType: false,
processData: false,
dataType: "json",
success: function (respuesta) {
tablaCreapedidos.on('draw', function(){
$(".btnAgregarProducto").removeClass("btn-info");
$(".btnAgregarProducto").addClass("btn-outline-info disabled");
}).ajax.reload(null, false);
var nombre = respuesta.nombre_producto;
var costo = respuesta.precio_venta;
$(".nuevoPropedido").append(
'<div class="row">'+
'<div class="col-5" style="padding-right:0px">'+
'<div class="input-group mb-3">'+
'<div class="input-group-prepend">'+
'<button type="button" class="btn btn-danger btnQuitarProducto" idProdpe="'+idProdpe+'"><i class="fas fa-times"></i></button>'+
'</div>'+
'<input type="text" class="form-control" id="agregarPropedido" name="agregarPropedido" value="'+nombre+'" readonly>'+
'</div>'+
'</div>'+
'<div class="col-3">'+
'<input type="number" class="form-control" id="agregarProcantidad" name="agregarProcantidad" min="1" step="1" value="1">'+
'</div>'+
'<div class="col-4" style="padding-left:0px">'+
'<div class="input-group mb-3">'+
'<div class="input-group-prepend">'+
'<label class="input-group-text"><i class="fas fa-dollar-sign"></i></label>'+
'</div>'+
'<input type="text" class="form-control" id="agregarProprecio" name="agregarProprecio" value="'+costo+'" readonly>'+
'</div>'+
'</div>'+
'</div>'
);
}
});
});
Con este codigo solo consigo que todos los botones se deshabiliten:
Y con el siguiente codigo todos se vuelven a habilitar:
$(".formCreapedido").on("click", ".btnQuitarProducto", function () {
'use strict';
$(this).parent().parent().parent().parent().remove();
var idProdpe = $(this).attr("idProdpe");
tablaCreapedidos.on('draw', function(){
$(".btnAgregarProducto").removeClass("btn-outline-info disabled");
$(".btnAgregarProducto").addClass("btn-info");
}).ajax.reload(null, false);
});
como puedo hacer para que solo se deshabilite el boton del producto que se selecciona?