1

he intentado llenar una tabla con datos que estan en una base de datos, todo por medio de ajax. La consulta con la base de datos esta bien, al igual que el envio de esa data desde un archivo php hasta un archivo js por medio de ajax, el problema esta en llenar la tabla con esos datos, solo se muestra una fila, y lo cierto es que se deberían mostrar 2 filas, pues ese es el numero de registros que tengo en mi tabla de Mysql.

Aquí les muestro el código para que lo vean mejor:

Aqui la consulta:

    public function ListarEmpresas () {
    global $conexion;
    $listar = "SELECT * FROM empresa";
    $query = $conexion->query($listar);
    return $query;
        }

Datos recibidos de la base de datos:

  $i = 1;
            $data = Array();

            $query_list = $objEmpresa->ListarEmpresas();

            if (!empty($query_list)) {

            while ($resp = $query_list->fetch_object()) {

            $data[] = array("id"=>$i, 
             "Codigo"=>$resp->codigo,
                "Empresa"=>$resp->NombreEmpresa,
                 "DocumentoTipo"=>$resp->tipo_documento,
              "NumDoc"=>$resp->num_documento,
              "Direccion"=>$resp->direccion,
                 "Telefono"=>$resp->telefono,
              "Correo"=>$resp->email,
              "Responsable"=>$resp->representante,
              "Estado"=>$resp->estado,
                  );
                  $i++;
                     }
                 echo json_encode($data);
                 } else {
                  echo "error";
                     }

Aqui recibo la data:

    $(document).ready(function() {

            mostrar_Lista_Empresas ();

            });

            function mostrar_Lista_Empresas () {

            var op = 'listar';

            _ajax("../Controllers/EmpresaController.php", {op:op})
            .done( function (info) {
            //$("#llenarTabla").html(info);

            //console.log(info);

            var count2 = $(info).size();

            //var count = Object.keys(info).length;

            var mostrar = "";
            var suscripcion = "";
            var clase = "";
            for (var i = 0; i < count2; i++) {
            if (info[i].Estado == "A") {
            suscripcion = "Gratuita";
            clase = "gratis";
            } else if(info[i].Estado == "P") {
            suscripcion = "Paga";
            clase = "paga";
            }

            mostrar = "<tr><td scope='row'>"+ info[i].id +"</td><td>"+ 
            info[i].Codigo +"</td><td>"+ info[i].Empresa +"</td><td>"+ 
            info[i].DocumentoTipo + ": " + info[i].NumDoc + "</td><td>"+ 
             info[i].Telefono
            +"</td><td>"+ info[i].Correo +"</td><td><span class='"+ clase 
              +"'>"+ suscripcion +"</span></td></tr>";
        $("#llenarTabla").html(mostrar);
                    }


                        });
                        }

                function _ajax(url, data) {

                var ajax = $.ajax({
                "method" : "POST",
                "url" : url,
                "data" : data,
                "dataType" : "json"
                })

                return ajax;
                        }

El HTML donde muestro los datos:

    <table class="table table-striped">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Codigo</th>
                      <th>Nombre Empresa</th>
                      <th>Documento</th>
                      <th>Telefono</th>
                      <th>Correo</th>
                      <th>Suscripción</th>

                    </tr>
                  </thead>

                  <tbody id="llenarTabla">

                  </tbody>
                </table>

Aqui muestro imagen de la consola donde muestro el resultado de "info", y ademas muestro tambien en consola el valor de count2. se puede ver que efectivamente la data si se esta recibiendo y que al usar $(info).size(); me arroja el tamaño de "info", o sea 2.

introducir la descripción de la imagen aquí

He probado tanto con count y count2, el resultado es el mismo, solo se muestra una fila, la ultima fila. Aqui se puede ver:

introducir la descripción de la imagen aquí Realmente me esta costando ver donde esta el problema, no se qué me estoy pasando por alto. Alguna sugerencia?

1
  • simplemente utiliza append: $("#llenarTabla").append(mostrar); el 30 abr. 2018 a las 23:13

2 respuestas 2

1

Tu problema esta en que re-escribes la tabla dentro de tu for loop. La forma correcta seria asi:

        var mostrar = "";
        var suscripcion = "";
        var clase = "";
        for (var i = 0; i < count2; i++) {
          if (info[i].Estado == "A") {
            suscripcion = "Gratuita";
            clase = "gratis";
          } else if(info[i].Estado == "P") {
            suscripcion = "Paga";
            clase = "paga";
          }

          mostrar += "<tr><td scope='row'>"+ info[i].id +"</td><td>"+ 
          info[i].Codigo +"</td><td>"+ info[i].Empresa +"</td><td>"+ 
          info[i].DocumentoTipo + ": " + info[i].NumDoc + "</td><td>"+ 
           info[i].Telefono
          +"</td><td>"+ info[i].Correo +"</td><td><span class='"+ clase 
            +"'>"+ suscripcion +"</span></td></tr>";
        }
        $("#llenarTabla").html(mostrar);
2
  • Correcto! Efectivamente me ha servido.
    – Carmen B.
    el 1 may. 2018 a las 1:03
  • Si te funciono, marca la respuesta como correcta
    – alanfcm
    el 1 may. 2018 a las 15:34
0

elimina var mostrar = "";

Prueba cambiando esto de esta m,anera con array_push()

array_push($data, = array("id"=>$i, 
             "Codigo"=>$resp->codigo,
                "Empresa"=>$resp->NombreEmpresa,
                 "DocumentoTipo"=>$resp->tipo_documento,
              "NumDoc"=>$resp->num_documento,
              "Direccion"=>$resp->direccion,
                 "Telefono"=>$resp->telefono,
              "Correo"=>$resp->email,
              "Responsable"=>$resp->representante,
              "Estado"=>$resp->estado,
                  )
);

Solo utiliza append para ir agregando los elementos a tu tabla, así:

var mostrar = "<tr><td scope='row'>"+ info[i].id +"</td><td>"+ 
            info[i].Codigo +"</td><td>"+ info[i].Empresa +"</td><td>"+ 
            info[i].DocumentoTipo + ": " + info[i].NumDoc + "</td><td>"+ 
             info[i].Telefono
            +"</td><td>"+ info[i].Correo +"</td><td><span class='"+ clase 
              +"'>"+ suscripcion +"</span></td></tr>";
        $("#llenarTabla").append(mostrar);//Aqui agregamos la tr a la tabla

ya que con

$("#llenarTabla").html(mostrar);

Solo sobrescribes la data con cada linea, así que te mostraba solo la última

Ejemplo:

$(function(){
	$(".cargar").click(function(){
  	$.get('https://test-163a4.firebaseapp.com/lista.json?callback=?', function(data){
      $("#cuerpo").html("");
      for(var i=0; i<data.datos.length; i++){
      	var tr = `<tr>
        	<td>`+data.datos[i].nombre+`</td>
          <td>`+data.datos[i].apellido+`</td>
          <td>`+data.datos[i].cargo+`</td>
          <td>`+data.datos[i].empresa+`</td>
        </tr>`;
        $("#cuerpo").append(tr)
      }
    })    
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
  Prueba de tabla Cargada desde JSON
</h1>
<button class="cargar">
  Cargar Lista
</button>
<table>
  <thead>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Cargo</th>
    <th>Empresa</th>
  </thead>
  <tbody id="cuerpo">
    
  </tbody>
</table>

3
  • yo habia probado anteriormente con append pero no me estaba funcionando, y no entiendo por qué...
    – Carmen B.
    el 1 may. 2018 a las 0:48
  • @RolandF edite mi respuesta, prueba creando el array con array_push a ver si te sale el 1 may. 2018 a las 1:33
  • Ok, gracias señor Carlos, probare esta alternativa y avisare si me ha servido.
    – Carmen B.
    el 2 may. 2018 a las 17:53

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.