0

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;">&nbsp;</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.

8
  • Cuando tiene que estar aqui, en 24 horas.
    – user227086
    Commented el 15 jun. 2022 a las 14:06
  • Los id= no llevan espacios, corrige eso primero: id="Buscar Operador", sino no se podrá encontrar correctamente con jquery
    – masterguru
    Commented el 15 jun. 2022 a las 14:12
  • No necesariamente tienes que autoclickear un botón, puedes hacer la petición Ajax al terminar cargar la página y en automático generar la tabla. Commented el 15 jun. 2022 a las 15:01
  • @emanuel: Antes pensé que te habia funcionado mi solución... ¿no es así? ¿que ha ocurrido pues? ¿algun error inesperado?
    – masterguru
    Commented el 15 jun. 2022 a las 17:17
  • siii ,se veia bien pero me funciono regular, que paso? como estoy usando un DataTable el boton no deja de clickarse y no me deja usar los imput de busqueda que ya carga el DataTable, tampoco puedo utilizar los botones de paginacion . Entonces empecé a buscar una alternativa diferente.
    – emanuel
    Commented el 15 jun. 2022 a las 17:24

2 respuestas 2

0

Prueba con el método trigger() (disparador) de jquery.

Suponiendo que el id= del boton es id="BuscarOperador" prueba con esto fuera de las funciones, es decir, cuando se carga el DOM:

$('#BuscarOperador').trigger('click');
0
0

oye en vez de ejecutar un botón al iniciar la página ya intentaste ejecutar una función al cargar una página? tipo:

<script type="text/javascript">
$(document).ready(function () {  función aqui }
</script>
1
  • es buena alternativa, lo que pasa es que al no recibir los parametros el ajax , solo me devuelve la funcion con tabla vacia. Es decir, funciona, pero no recibe datos hasta que no se haga el submit del boton. Y con la aternativa del trigger no deja de apretarse el boton, tanto es asi que no se puede utilziar ningun boton
    – emanuel
    Commented el 15 jun. 2022 a las 18:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.