Reload data in bootstrap-table with a json object

Question

I make a website with bootstrap. I have a bootstrap-table that initially it load from include php code. This is working fine, no problems.

After that I have a button when it's clicked it's open a window modal to selected different parameters to send query. I use jquery with ajax to POST the variables to another php and I get a json object as this:

{
  "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"
}

The problem is I do not get to load the bootstrap table with this array.

I read a lot in internet and here too. I have tried to make a small bootstrap table and small query to discard errors in the subtraction of code but it doesn't working fine. Always it get json object but It doesn't load in the bootstrap table.

I use this jquery code to send the parameters by post to php code and get the json object with this paramenters:

  /*  QUERY   */

      $('#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);
         }
      });
  });

I have read to link the json object with fields of the bootstrap-table only it's necessary the data-field paramater of bootstrap-table has the same to json objects:

  <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>

I try it to load data using the parameter 'load' and 'append' but it's the same result.

Anybody can help me to understand how do it to link json object with fields of bootstrap-table? Is it possible that the mistake is the first data load is using php?

Answer 1

Another way,

/* JS */
$('#table').bootstrapTable('destroy');      
for (var iCount = 0; iCount < data.contentList.length; iCount++) {
    var objData = data.contentList[iCount];
    var trService = "<tr>\n"
                    + " <td>" + objData.estado + "</td>\n"
                    + " <td>" + objData.id_usuario + "</td>\n"
                    + " <td>" + objData.nombre + "</td>\n"
                    + " <td>" + objData.apellido1 + "</td>\n"
                    + " <td><input id=\"" + objData.id_addtime_horario + "-sc\" type=\"text\" class=\"form-control\" value=\"" + id_addtime_horario + "\" readonly></td>\n"
                    + "</tr>"
    $("#trServiceList").append(trService);                      
}
$('#table').bootstrapTable();
        
/* HTML */
<table id="table" data-toggle="table" data-search="true" data-filter-control="true" data-show-export="true"
                    data-click-to-select="true" data-toolbar="#toolbar">
    <thead>
        <tr>
        <th data-field="estado"     data-filter-control="input"  data-sortable="true" >Estado</th>
        <th data-field="id_usuario" data-filter-control="select" data-sortable="true" >Id Usuario</th>
        <th data-field="nombre"     data-sortable="true" >Nombre</th>
        <th data-field="apellido1"  data-sortable="true" >Apellido1</th>
        <th data-field="id_addtime_horario"          data-sortable="true" >Id_addtime_horario</th>
        </tr>
    </thead>
    <tbody id="trServiceList"></tbody>
</table>

Hope this helps.

Answer 2

Thank you! I've been struggling to refresh a bootstrap table (in a Ruby on Rails app) with ajax. Was not aware of:

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

With this in my ajax function:

$('#tableprod').bootstrapTable({ data: data });

it populated the table the first time, but when I called that ajax function again from a drop-down selection, it wouldn't refresh.

Just discovered: if I have this in my ajax function it refreshes the table:

$('#taggedStudyTable').bootstrapTable({ data: data });
$('#taggedStudyTable').bootstrapTable('load', data);

So relieved to see this in your example, try it, and see that it works. (thank you!)