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!