1

Estoy creando una página web con Bootstrap. Inicialmente al cargar la página utilizo PHP para insertar los resultados en las celdas de la tabla. Hasta aquí todo bien.

Después utilizo un botón con un menú modal de Bootstrap el cual tiene una serie de campos que se indican para posteriormente al clicar en ejecutar llamé a través de JQuery, Ajax, a una página PHP mediante envío POST de 4 parámetros.

Esta consulta me devuelve un objeto Json que incluyo en una array de JavaScript pero que no soy capaz de que mi tabla me muestre esos datos.

Realmente he probado casi de todo pero se me debe estar pasando algo.

Se que el objeto Json me devuelve un array tal que así:

{
  "estado":"PE",
  "id_usuario":"20",
  "nombre":"Irene",
  "apellido1":"Munn\u00e9",
  "id_addtime_horario":"7",
  "fecha":"2016-12-30",
  "dia_semana":"friday   ",
  "hora_ini":"10:00:00",
  "hora_fin":"15:09:26",
  "jornada":"05:42:12",
  "jornada_flexibilidad":"00:02:46",
  "jornada_deficit":"00:00:00",
  "extra_jornada":"00:00:00",
  "extra_autorizado":null,
  "id_fichaje":"1766",
  "id_fichaje_detalle":"44071"
}

Y hasta donde yo sé, que no es mucho, se enlaza por JavaScript de la siguiente manera:

  $('#executaquery').on('click', function(){

          //  Recupero valors per POST to php

          var usuari = document.getElementById('usuari').value;
          var estat = document.getElementById('estat').value;
          var data_in = document.getElementById('data_in').value;
          var data_fi = document.getElementById('data_fi').value;

          $.ajax({                                                              // Llamada a queryProduct.php devuelve objeto array JSON asigno a
             method: 'POST',                                                      // los campos de modal window
             dataType: 'json',
             url: 'queryFitxatges.php',
             data: { usuaris: usuari, estats: estat, datain: data_in, datafi: data_fi},

             success: function(response) {

                $('#consulta').modal('hide');

                var myData = [];
                myData.push(response);

                $('#tableprod').bootstrapTable('load', myData);
             }
          });
      });

Os he pasado todo el código que utilizo para enviar los parámetros de la consulta y me devuelva el objeto json. La línea de código que enlaza los datos con la tabla es:

$('#tableprod').bootstrapTable('load', myData);

Por último por los ejemplos que he podido ver en la documentación oficial se enlazaría directamente con la instrucción anterior y la definición de los campos del objeto json idénticos a los data-field de la table. Que también lo tengo así:

      <table class='table-bordered' id='tableprod'
      data-toggle='table'
      data-toolbar='#toolbar'
      data-sort-name='name'
      data-sort-order='desc'
      data-pagination='true'>

      <thead class='thead-inverse'>
          <tr>
              <th data-switchable='false' data-checkbox='true'></th>
              <th data-field='estado' data-sortable='true'><?php echo $cols[0]; ?></th>
              <th data-field='id_usuario' data-sortable='true'><?php echo $cols[1]; ?></th>
              <th data-field='nombre' data-sortable='true'><?php echo $cols[2]; ?></th>
              <th data-field='apellido1' data-sortable='true'><?php echo $cols[3]; ?></th>
              <th data-field='id_addtime_horario' data-sortable='true'><?php echo $cols[4]; ?></th>
              <th data-field='fecha' data-sortable='true'><?php echo $cols[5]; ?></th>
              <th data-field='dia_semana' data-sortable='true'><?php echo $cols[6]; ?></th>
              <th data-field='hora_ini' data-sortable='true'><?php echo $cols[7]; ?></th>
              <th data-field='hora_fin' data-sortable='true'><?php echo $cols[8]; ?></th>
              <th data-field='jornada' data-sortable='true'><?php echo $cols[9]; ?></th>
              <th data-field='jornada_flexibilidad' data-sortable='true'><?php echo $cols[10]; ?></th>
              <th data-field='jornada_deficit' data-sortable='true'><?php echo $cols[11]; ?></th>
              <th data-field='extra_jornada' data-sortable='true'><?php echo $cols[12]; ?></th>
              <th data-field='extra_autoritzado' data-sortable='true'><?php echo $cols[13]; ?></th>
              <th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
            </tr>
      </thead>
      <tbody>
    <?php while ($row = pg_fetch_row($result)){ ?>
          <tr id='<?php echo $row[14]; ?>' data-idfixatgedetall='<?php echo $row[15]; ?>' data-estado='<?php echo $row[0] ?>' data-autoritzat='<?php echo $autoritzat = $row[12]; ?>'>
              <td></td>
              <td data-field='estado'><?php echo $estado = EstadoIcon($row[0]); ?></td>
              <td data-field='id_usuario'><?php echo $row[1]; ?></td>
              <td data-field='nombre'><?php echo $row[2]; ?></td>
              <td data-field='apellido1'><?php echo $row[3]; ?></td>
              <td data-field='id_addtime_horario'><?php echo $row[4]; ?></td>
              <td data-field='fecha'><?php echo $date = FormatDate($row[5]); ?></td>
              <td data-field='dia_semana'><?php echo $dia = Dia($row[6]); ?></td>
              <td data-field='hora_ini'><?php echo $time = FormatTime24($row[7]); ?></td>
              <td data-field='hora_fin'><?php echo $time = FormatTime24($row[8]); ?></td>
              <td data-field='jornada'><?php echo $time = FormatTime($row[9]); ?></td>
              <td data-field='jornada_flexibilidad'><?php echo $time = FormatTime($row[10]); ?></td>
              <td data-field='jornada_deficit'><?php echo $time = FormatTime($row[11]); ?></td>
              <td data-field='extra_jornada'><?php echo $time = FormatTime($row[12]); ?></td>
              <td data-field='extra_autoritzat'><?php echo $autoritzat = Autoritzat($row[13]); ?></td>
              <td><button class='btn btn-xs edit btn-addcom' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button></td>
          </tr>
    <?php }  ?>
      </tbody>
    </table>

He probado hacer lo mismo a la mínima expresión sin pasar parámetros, haciendo una tabla nueva... pero no hay manera.

A ver si me podéis echar una mano a entender la teoría y poder solucionar mi problema.

Mientras tanto seguiré buscando...

Gracias!

2
  • Te recomiendo lo hagas con angular. Al hacer la llamada ajax desde angular y retornar el json. Pones $scope.datos=recibe; y listo. Echale un vistazo Commented el 4 ene. 2017 a las 17:15
  • Voy a ver, gracias @Alexis Granja por el consejo
    – mariano
    Commented el 4 ene. 2017 a las 19:04

2 respuestas 2

1

Deberias realizar algunas pruebas de que devuelve. O sea, verificar si recibes un JSON o un string y debes parsearlo.

Lo que veo es que estas mezclando un poco de jQuery con un poco de javascript+DOM. Pero creo que el problema lo tienes con el array push que obtienes del PHP.

Pasé a limpio como me parece que debería ser...

 $('#executaquery').on('click', function(){
          var usuari = $('#usuari').val();
          var estat = $('#estat').val();
          var data_in = $('#data_in').val();
          var data_fi = $('#data_fi').val();

       $.post('queryFitxatges.php',{ 'usuaris': usuari, 'estats': estat, 'datain': data_in, 'datafi': data_fi},function(response){
                if (typeof(response) == "string"){response= JSON.parse(response);) 
                $('#consulta').modal('hide');                
                $('#tableprod').bootstrapTable('load', response);           
       })

1

El problema son estas dos líneas dentro del success:

var myData = [];
myData.push(response);

Lo que ocurre es que myData es un arreglo de objetos, y al hacer el push con la respuesta del servidor, lo que estás generando es un arreglo que en primera posición tiene otro arreglo que es la respuesta de tu servidor, básicamente:

[      // Empieza la posición 0 de myData
  [
    {    // Empieza la posición 0 de la respuesta
      "estado":"PE",
      "id_usuario":"20",
      "nombre":"Irene",
       ...
    },   // Termina la posisión 0 de la respuesta
    {    // Empieza la posición 1 de la respuesta
      "estado":"PE",
      "id_usuario":"21",
      "nombre":"Juan",
       ...
    }    // Termina la posisión 1 de la respuesta
  ]   // Termina la posición 0 de myData
]

Lo único que tienes que hacer es omitir dichas líneas y repoblar la tabla así:

$('#tableprod').bootstrapTable('load', response);

Entonces el código de tu llamada AJAX debería quedar así:

$.ajax({
    method: 'POST',
    dataType: 'json',
    url: 'queryFitxatges.php',
    data: { usuaris: usuari, estats: estat, datain: data_in, datafi: data_fi},
    success: function(response) {
               $('#consulta').modal('hide');
               $('#tableprod').bootstrapTable('load', response);
             }
});

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.