Bootstrap table - reload records according to ajax json object

Question

Bootstrap table - reload records according to ajax json object

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I'm creating a website with Bootstrap . Initially when loading the page I use PHP to insert the results in the cells of the table. So far so good.

Then I use a button with a modal menu of Bootstrap which has a series of fields that are indicated for later when clicking on execute called through JQuery , < strong> Ajax , to a PHP page by sending POST 4 parameters.

This query returns a Json object that I include in a array of JavaScript but I am not able to have my table show me that data.

I've really tried almost everything but something must be happening to me.

I know that the Json object returns a array such that:

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

And as far as I know, which is not much, it is linked by JavaScript as follows:

  $('#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 passed all the code I use to send the parameters of the query and return the json object. The line of code that links the data to the table is:

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

Finally, for the examples that I could see in the official documentation, it would be linked directly with the previous instruction and the definition of the fields of the json object identical to the data-fields of the table. That I also have it like this:

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

I have tried to do the same to the minimum expression without passing parameters, making a new table ... but there is no way.

Let's see if you can help me understand the theory and solve my problem.

Meanwhile I'll keep looking ...

Thank you!

jquery php bootstrap json ajax

asked by rumar 04.01.2017 в 17:52

source

2 answers

Using .Zip or linq in c # to add two fields from a series of objects contained in two lists SQL query that generates rows depending on quantity

score 1 · Answer 1

You should perform some tests that returns. That is, verify if you receive a JSON or a string and you must parse it.

What I see is that you are mixing a bit of jQuery with a little javascript + DOM . But I think the problem is with the array push that you get from PHP.

I went to clean as I think it should be ...

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

score 1 · Answer 2

The problem is these two lines within success :

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

What happens is that myData is a array of objects, and by making the push with the server response, what you are generating is an array that in first position has < strong> another fix which is the response of your server, basically:

[      // 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
]

All you have to do is skip those lines and repopulate the table like this:

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

Then the code of your AJAX call should look like this:

$.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);
             }
});