jquery - 使用 json 对象重新加载 bootstrap-table 中的数据

Question

我用 bootstrap 制作了一个网站。我有一个 Bootstrap 表，最初它是从包含 php 代码加载的。这工作正常，没有问题。

之后，我有一个按钮，当单击它时，它会打开一个窗口模式来选择不同的参数来发送查询。我使用 jquery 和 ajax 将变量 POST 到另一个 php，并得到一个 json 对象，如下所示:

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

问题是我无法使用该数组加载 Bootstrap 表。

我在互联网上和这里也阅读了很多内容。我尝试制作一个小型 Bootstrap 表和小型查询来丢弃代码减法中的错误，但它无法正常工作。它总是获取 json 对象，但它不会加载到 Bootstrap 表中。

我使用此 jquery 代码将参数通过 post 发送到 php 代码，并使用此参数获取 json 对象:

  /*  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);
         }
      });
  });

我已阅读将 json 对象与 bootstrap-table 的字段链接起来，只有 bootstrap-table 的数据字段参数必须与 json 对象相同:

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

我尝试使用参数“load”和“append”加载数据，但结果相同。

任何人都可以帮助我理解如何将 json 对象与 bootstrap-table 的字段链接起来？是否有可能错误是第一次数据加载使用php？

Answer 1

谢谢!我一直在努力使用 ajax 刷新 Bootstrap 表(在 Ruby on Rails 应用程序中)。不知道:

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

在我的ajax函数中使用这个:

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

它第一次填充表格，但是当我从下拉选择中再次调用该 ajax 函数时，它不会刷新。

刚刚发现:如果我的 ajax 函数中有这个，它会刷新表格:

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

很欣慰地在你的例子中看到这一点，尝试一下，看看它是否有效。 (谢谢!)