Quiero cargar una tabla inicial. Probé creando dos tablas: una que recargue sola y otra con los select, pero tenia conflictos con el DataTable.
Se me ocurrió que el botón que toma los valores del select y los envia al ajax, se ejecute automaticamente la primera vez que se carga la página.
¿existe esa solución?
//Corresponde al select descripcion
function listaTipoOperador(id_operador) {
var id_operador = $('#slc_tipoOperador').val();
var idtipo_Operador = $('#slc_tipoOperador').val();
$.ajax({
type: "GET",
url: "api/operadores/lista_tipo_operador",
success: function(response) {
let cadena = '<option value = "' + 0 + '"> TODOS: </option>'
response.forEach(elemento => {
elemento.idtipo_operador;
elemento.descripcion;
cadena += '<option value = "' + elemento.idtipo_operador + '">' + elemento.descripcion + '</option>';
});
$('#slc_tipoOperador').append(cadena);
$('slc_tipoOperador').html();
}
});
}
//tabla recibe parametros del select para filtrar por descripcion
function tablaOperadores(idtipo_operador, estado) {
var idtipo_Operador = $('#slc_tipoOperador').val();
var estado = $('#slc_estado').val();
$.ajax({
type: "GET",
url: "api/operadores/tabla_operador/" + idtipo_operador + "/" + estado,
success: function(response) {
let thead = '<thead><tr class="info"><th style="width: 10%; padding: 0px; padding-left: 10px;">Id</th><th style="width: 50%; padding: 0px; padding-left: 10px;">Nombre</th><th style="width: 10%; padding: 0px; padding-left: 10px;">Tipo</th><th style="width: 10%; padding: 0px; padding-left: 10px;">Estado</th><th style="width: 20%; padding: 0px;"> </th></tr></thead>';
response.forEach(elemento => {
thead += '<tr>' +
'<td style="padding: 0px; font-size: 12px; padding-left: 5px; vertical-align: middle;">' + elemento.idoperador + '</td>' +
'<td style="padding: 0px; font-size: 12px; vertical-align: middle;">' + elemento.nombre_apellido + '</td>' +
'<td style="padding: 0px; font-size: 12px; vertical-align: middle;">' + elemento.tipo_operador + '</td>' +
'<td style="padding: 0px; font-size: 12px; padding-left: 20px; vertical-align: middle;">' + (elemento.estado == 0 ? 'Inactivo' : 'Activo') + '</td>' +
'<td style="height: 5px; padding: 4px;" align="center">' +
'<a class="btn btn-xs bg-navy " style="margin:2px" id="ver" title="Ver Datos del Operador" onclick="cargarOperador ( ' + elemento.idoperador + ', `edit` ,' + elemento.id_usuario + ' );"><i class= "fa fa-eye "></i></a>' +
'<a class="btn btn-xs btn-info" style="margin:2px" id="editar" title="Actualizar Datos del operador" onclick="cargarOperador( ' + elemento.idoperador + ', `this` ,' + elemento.id_usuario + ' );"><i class="fa fa-pencil-square-o "></i></a>' +
'<a class="btn btn-xs bg-yellow" style="margin:2px" title="Cambiar Estado" onclick="cambiarEstado(' + elemento.idoperador + ',' + elemento.estado + ');"><i class="fa fa-exchange " ></i></a>' +
'</td>' + '</tr>';
});
$('#listaOperadores').html(thead);
$('#listaOperadores').DataTable();
}
});
}
HTML
<div class="col-md-6">
<form action="api/operadores/tabla_operador/" method="GET">
<div class="col-sm-2">
<select class="form-control" id="slc_tipoOperador" name="slc_tipoOperador">
</select>
</div>
<div class="col-sm-2">
<select class="form-control" id="slc_estado" name="slc_estado">
<option value="estado">Estado</option>
<option value="1">Activos</option>
<option value="0">Inactivos</option>
</select>
</div>
<button type="button" class="btn btn-success" title="registrar" style="font-size: 12px; width: 50%%; display: block;" id="Buscar Operador" onClick="tablaOperadores($('#slc_tipoOperador').val()); $('#listaOperadores').DataTable().destroy()"><i class="fa fa-check"></i> Buscar</button>
</form>
</div>
no es todo el html , es decir me funciona todo correcto, solo que me gustaria que se ejecute la primera vez automaticamente, para no tener que crear dos tablas.
id="Buscar Operador"
, sino no se podrá encontrar correctamente con jquery