mi problema es el siguiente:
Tengo un datatable y el botón dentro de un modal que agrega <select>
e <input>
dinámicos y al seleccionar una opción del <select>
se omitirá la opción en la próxima selección pero al cargar mi datatable la función mencionada anteriormente deja de funcionar y he detectado que al comentar el método que carga mi tabla vuelve a funcionar bien mi función de agregar.
Cuando ambos están declarados mi función MantProyecto.botonAgregar();
deja de funcionar.
Tener en cuenta que el método MantProyecto.cargar_tabla()
funciona a la perfección.
$(document).ready(function() {
MantProyecto.botonAgregar();
MantProyecto.cargar_tabla();
});
este es el json listatabla.json que carga la tabla
{
"data": [
{
"NroCarga": 100005,
"NroTransferencia": 100005,
"descripcion_carga": null,
"descripcion_transf": null,
"Ingresos": 2.00,
"descripcionProyecto": null,
"Sigeri": {
"Proyecto": null,
"Colaborador": null,
"DescPuesto": null,
"TarifaPromedioxPerfil": 0,
"Horas": 0,
"TotalCobrado": 0,
"CostoBienes": 2.00,
"ManoObra": 2.00,
"GatosGenerales": 2.00,
"Depreciacion": 15.00,
"Tarifa": 0,
"Validacion": null,
"CostosTotales": 0
},
"DepreciacionId": "1568733322841"
},
{
"NroCarga": 100038,
"NroTransferencia": 0,
"descripcion_carga": null,
"descripcion_transf": null,
"Ingresos": 32.00,
"descripcionProyecto": null,
"Sigeri": {
"Proyecto": null,
"Colaborador": null,
"DescPuesto": null,
"TarifaPromedioxPerfil": 0,
"Horas": 0,
"TotalCobrado": 0,
"CostoBienes": 4.00,
"ManoObra": 0.00,
"GatosGenerales": 0.00,
"Depreciacion": 0.00,
"Tarifa": 0,
"Validacion": null,
"CostosTotales": 0
},
"DepreciacionId": "1568739619037"
},
{
"NroCarga": 100122,
"NroTransferencia": 0,
"descripcion_carga": null,
"descripcion_transf": null,
"Ingresos": 4.00,
"descripcionProyecto": null,
"Sigeri": {
"Proyecto": null,
"Colaborador": null,
"DescPuesto": null,
"TarifaPromedioxPerfil": 0,
"Horas": 0,
"TotalCobrado": 0,
"CostoBienes": 4.00,
"ManoObra": 4.00,
"GatosGenerales": 4.00,
"Depreciacion": 70.00,
"Tarifa": 0,
"Validacion": null,
"CostosTotales": 0
},
"DepreciacionId": "1568733739782"
},
{
"NroCarga": 100210,
"NroTransferencia": 0,
"descripcion_carga": null,
"descripcion_transf": null,
"Ingresos": 12.00,
"descripcionProyecto": null,
"Sigeri": {
"Proyecto": null,
"Colaborador": null,
"DescPuesto": null,
"TarifaPromedioxPerfil": 0,
"Horas": 0,
"TotalCobrado": 0,
"CostoBienes": 21.00,
"ManoObra": 21.00,
"GatosGenerales": 21.00,
"Depreciacion": 0.00,
"Tarifa": 0,
"Validacion": null,
"CostosTotales": 0
},
"DepreciacionId": "1568846197568"
},
{
"NroCarga": 100211,
"NroTransferencia": 0,
"descripcion_carga": null,
"descripcion_transf": null,
"Ingresos": 21.00,
"descripcionProyecto": null,
"Sigeri": {
"Proyecto": null,
"Colaborador": null,
"DescPuesto": null,
"TarifaPromedioxPerfil": 0,
"Horas": 0,
"TotalCobrado": 0,
"CostoBienes": 2.00,
"ManoObra": 3.00,
"GatosGenerales": 4.00,
"Depreciacion": 0.00,
"Tarifa": 0,
"Validacion": null,
"CostosTotales": 0
},
"DepreciacionId": "1568846292214"
},
{
"NroCarga": 103546,
"NroTransferencia": 0,
"descripcion_carga": null,
"descripcion_transf": null,
"Ingresos": 1.00,
"descripcionProyecto": null,
"Sigeri": {
"Proyecto": null,
"Colaborador": null,
"DescPuesto": null,
"TarifaPromedioxPerfil": 0,
"Horas": 0,
"TotalCobrado": 0,
"CostoBienes": 1.00,
"ManoObra": 0.00,
"GatosGenerales": 0.00,
"Depreciacion": 6.00,
"Tarifa": 0,
"Validacion": null,
"CostosTotales": 0
},
"DepreciacionId": "1568737123144"
},
{
"NroCarga": 103569,
"NroTransferencia": 0,
"descripcion_carga": null,
"descripcion_transf": null,
"Ingresos": 10.00,
"descripcionProyecto": null,
"Sigeri": {
"Proyecto": null,
"Colaborador": null,
"DescPuesto": null,
"TarifaPromedioxPerfil": 0,
"Horas": 0,
"TotalCobrado": 0,
"CostoBienes": 10.00,
"ManoObra": 10.00,
"GatosGenerales": 10.00,
"Depreciacion": 0.00,
"Tarifa": 0,
"Validacion": null,
"CostosTotales": 0
},
"DepreciacionId": "1568824943240"
},
{
"NroCarga": 103569,
"NroTransferencia": 100150,
"descripcion_carga": null,
"descripcion_transf": null,
"Ingresos": 2.00,
"descripcionProyecto": null,
"Sigeri": {
"Proyecto": null,
"Colaborador": null,
"DescPuesto": null,
"TarifaPromedioxPerfil": 0,
"Horas": 0,
"TotalCobrado": 0,
"CostoBienes": 2.00,
"ManoObra": 2.00,
"GatosGenerales": 2.00,
"Depreciacion": 0.00,
"Tarifa": 0,
"Validacion": null,
"CostosTotales": 0
},
"DepreciacionId": "1568846459043"
}
]
}
Este es el json listacombo.json para el select dinámico
{
"data": [
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "1",
"descripcion_breve": "AMORTIZACION DE SOFTWARE",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "2",
"descripcion_breve": "DA DEPREC.DE EQUIPO DE COMPUTO \r\n",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "3",
"descripcion_breve": "DEPREC.DE EQUIPO DE COMPUTO",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "4",
"descripcion_breve": "DEPREC.DE EQUIPOS DIVERSOS",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "5",
"descripcion_breve": "DEPREC.DE INFRAESTRUCTURA",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "6",
"descripcion_breve": "DEPREC.DE MUEB.Y ENSERES",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "7",
"descripcion_breve": "DA DEPRECIACION ASIGNADA",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
}
]
}
Mi html
<section class="container">
<div class="container mb-4">
<div class="d-flex justify-content-center titulo-facturacion">
<h3 id="tituloPrincipal"> MANTENIMIENTO DE PROYECTOS </h3>
</div>
</div>
</section>
<section class="container">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-primary" type="button" id="btnNuevo" data-toggle="modal" data-target="#exampleModal">Nuevo</button>
</div>
</div>
<div class="row">
<div class="col-12 mb-2">
<div class="">
<table cellpadding="0"
cellspacing="0"
border="0"
class="table table-bordered"
id="tabla_mantProyecto" style="font-size:10px; width:100%">
<thead class="alert-primary">
<tr>
<th>#</th>
<th>N° Carga</th>
<th>N° Transferencia</th>
<th>Ingresos</th>
<th>Costo Bienes</th>
<th>Mano Obra</th>
<th>Gastos Generales</th>
<th>Depreciacion</th>
<th>Accion</th>
</tr>
</thead>
<tbody id="tarifaproyecto"></tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Modal 2-->
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-sc" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-5">
<label for="descripcionCarga">Proyecto a Cargar</label>
<input type="number" id="idCargar" hidden>
<input type="text" class="form-control" id="descripcionCarga" placeholder="Cargar">
</div>
<div class="form-group col-md-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck">
<label class="form-check-label" for="exampleCheck">Transferir a</label>
</div>
</div>
<div class="form-group col-md-5" id="trans">
<label for="descripcionTransferir" id="labeltorre">Torre</label>
<input type="hidden" id="idTransferir">
<input type="text" class="form-control" id="descripcionTransferir" placeholder="Transferir">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="idIngresos">Ingresos</label>
<input type="number" class="form-control" id="idIngresos" placeholder="Ingresos">
</div>
<div class="form-group col-md-3">
<label for="idCostoBienes">Costo Bienes</label>
<input type="number" class="form-control" id="idCostoBienes" placeholder="Costo Bienes">
</div>
<div class="form-group col-md-3">
<label for="idManoObra">Mano Obra</label>
<input type="number" class="form-control" id="idManoObra" placeholder="Mano Obra">
</div>
<div class="form-group col-md-3">
<label for="idGastoGen">Gastos Generales</label>
<input type="number" class="form-control" id="idGastoGen" placeholder="Gasto Generales">
</div>
</div>
<label for="tipoDepreciacion">Depreciacion</label>
<div id="items">
</div>
<div class="form-row">
<div class="form-group">
<button id="add" type="button" class="btn btn-primary">Agregar</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnGuardar">Guardar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnCerrar">Cerrar</button>
<button type="button" class="btn btn-primary" id="btnActualizar">Actualizar</button>
</div>
</div>
</div>
</div>
Lo que quiero es saber porque pasa eso yo necesito que mi tabla cargue desde el principio y no afecte a la función del botón agregar
Este es mi javascript
var seleccionados = [];
$(document).ready(function() {
MantProyecto.init_botones();
MantProyecto.botonAgregar();
MantProyecto.cargar_tabla();
});
var MantProyecto = (function() {
return {
init_botones: function() {
$('#btnNuevo').click(function() {
MantProyecto.limpiar_controles();
$('#btnGuardar').show();
$('#btnActualizar').hide();
});
},
botonAgregar:function(){
$('#add').click(function() {
if (seleccionados.length < 7) {
var valor = $('select:enabled').val();
valor != null ? seleccionados.push(valor) : null;
$('.idDepreciacion').prop('disabled', true);
MantProyecto.cargaCombo();
}
if (seleccionados.length == 6) $('#add').prop('disabled', true);
//MantProyecto.cargaCombo();
});
},
limpiar_controles: function() {
$('#idCargar').val('');
$('#descripcionCarga').val('');
$('#idTransferir').val('');
$('#descripcionTransferir').val('');
$('#idDescripcion').val('');
$('#idIngresos').val('');
$('#idCostoBienes').val('');
$('#idManoObra').val('');
$('#idGastoGen').val('');
},
cargaCombo: function() {
$.ajax({
url: 'listacombo.json',
dataType: 'json',
type: 'GET',
success: function(json) {
var items = document.getElementById('items');
//items.innerHTML += "";
var select = `
<div class="form-row dep_val" style="margin-bottom:3px;">
<select class="idDepreciacion">
`;
for (let valor of json.data) {
if (!seleccionados.includes(valor.id_sub_catalogo))
select +=
"<option value='" +
valor.id_sub_catalogo +
"' >" +
valor.descripcion_breve +
'</option>';
}
var html =
select +
`</select>
<input class="form-control col-md-2 valor" type="number"/>
<button class="btn btn-primary delete">-</button>
</div>`;
$('#items').append(html);
},
});
},
cargar_tabla() {
var table = $('#tabla_mantProyecto')
.removeAttr('width')
.DataTable({
processing: true,
serverSide: false,
paging: true,
ordering: false,
info: true,
searching: true,
bDestroy: true,
autoWidth: false,
ajax: {
url: 'listatabla.json',
type: 'GET',
datatype: 'json',
},
columns: [
{
data: null,
orderable: false,
},
{ data: 'NroCarga', orderable: false },
{ data: 'NroTransferencia', orderable: false },
{
data: 'Ingresos',
render: $.fn.dataTable.render.number(',', '.', 0, 'S/. '),
orderable: false,
},
{
data: 'Sigeri.CostoBienes',
render: $.fn.dataTable.render.number(',', '.', 0, 'S/. '),
orderable: false,
},
{
data: 'Sigeri.ManoObra',
render: $.fn.dataTable.render.number(',', '.', 0, 'S/. '),
orderable: false,
},
{
data: 'Sigeri.GatosGenerales',
render: $.fn.dataTable.render.number(',', '.', 0, 'S/. '),
orderable: false,
},
{
data: 'Sigeri.Depreciacion',
render: $.fn.dataTable.render.number(',', '.', 0, 'S/. '),
orderable: false,
},
{
render: function(data, type, full, meta) {
//return '<a class="btn btn-info" href="javascript: tarifa.fnEditarProyecto(' + full.Proyecto.IdProyecto + ');" title="Editar registro.">Editar</a>';
return (
'<button class="btn btn-info" type="button" id="btnEditar" onClick="MantProyecto.fnEditarMantProyecto(' +
full.DepreciacionId +
')">Editar</button >' +
'<button class="btn btn-danger" type="button" id="btnEliminar" onClick="MantProyecto.fnEliminarMantProyecto(' +
full.DepreciacionId +
')">Eliminar</button >'
);
},
},
// { data: "Tarifa", render: $.fn.dataTable.render.number(',', '.', 0, 'S/. ') },
],
columnDefs: [
{
sortable: false,
class: 'index',
targets: 0,
},
{ width: '150', targets: 3 },
],
language: {
decimal: '',
emptyTable: 'No hay información',
info: 'Mostrando _START_ a _END_ de _TOTAL_ Entradas',
infoEmpty: 'Mostrando 0 to 0 of 0 Entradas',
infoFiltered: '(Filtrado de _MAX_ total entradas)',
infoPostFix: '',
thousands: ',',
lengthMenu: 'Mostrar _MENU_ Entradas',
loadingRecords: 'Cargando...',
processing: 'Procesando...',
search: 'Buscar:',
zeroRecords: 'Sin resultados encontrados',
paginate: {
first: 'Primero',
last: 'Ultimo',
next: 'Siguiente',
previous: 'Anterior',
},
},
});
table
.on('order.dt search.dt', function() {
table
.column(0, { search: 'applied', order: 'applied' })
.nodes()
.each(function(cell, i) {
cell.innerHTML = i + 1;
});
})
.draw();
},
};
})();
En la siguiente imagen se puede observar que se repite la misma opción del <select>
cuando no debería hacer eso, ya que la función agregar hace que se omita la opción seleccionada cuando se selecciona un segundo <select>
y esa función se ve afectada cuando agrego el método MantProyecto.cargar_tabla()
en el document.ready()
ya que deja de funcionar.
MantProyecto.cargar_tabla();
antes deMantProyecto.botonAgregar();
luego el problema es muy extenso para tratar de resolverlo.de momento. – the-breaker el 21 sep. 19 a las 0:45