table always active with Ajax and php

Question

table always active with Ajax and php

Navigation

#1 by (1 votes)

1

I'm studying, I'm a beginner, and I'm doing a site with php, jquery and ajax, everything's blz, so I need to load the data from the database and put it on a table, only the data has to be real-time , that if it has an inclusion in the database the table is updated without giving refresh, is it possible to do this in ajax? the part of php can do everything right my problem is only in js and jquery to precede that table to be loaded, thank you all at once.

php mysql ajax

asked by anonymous 25.03.2017 / 00:50

1 answer

How to access property with # in a JSON file with JQuery? Problem to open file

score 1 · Accepted Answer

A simple way to do this is to use the setTimeout of javascript feature to run a given function from time to time, creating a loop.

If you have any function to create and display the data table, in the same function you can call it according to the code below by setting a time.

setTimeout(funcaoQualquer, 20000); // 20 segundos

See how it works!

var tabelaDados = function () {     
  
  return {
    init: function () {
      console.log('Executando tabelaDados...');
      
      // dados para tabela
      var dataAtual = new Date()
          ,dia  = dataAtual.getDate("dd/mm/YYY")
          ,mes  = dataAtual.getMonth()+ 1
          ,ano  = dataAtual.getFullYear()
          ,hora = dataAtual.getHours()
          ,minuto = dataAtual.getMinutes()
          ,segundo  = dataAtual.getSeconds();

          var table =
          "<table class=\"table table-bordered\">\n" +
          " <thead>\n" +
          "   <tr>\n" +
          "     <th>Data Atual</th>\n" +
          "     <th>Hora</th>\n" +
          "     <th>Minuto</th>\n" +
          "     <th>Segundo</th>\n" +      
          "   </tr>" +
          " </thead>\n" +
          " <tbody>\n" +
          "   <tr>\n" +
          "     <td>"+dia+"/"+mes+"/"+ano+"</td>\n" +
          "     <td>"+hora+"</td>\n" +
          "     <td>"+minuto+"</td>\n" +
          "     <td>"+segundo+"</td>\n" +      
          "   </tr>\n" +
          " </tbody>\n" +
          "</table>\n"; 
      
      //
      $('#example_001').html(table);
      
      //loop 5s
      setTimeout(tabelaDados.init, 5000);      
    }
  }

}(jQuery);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-12 col-md-12">
  <div class="table table-reponsive" id="example_001">
  </div>
</div>
<script>
jQuery(document).ready(function () {
  console.log('Iniciando...');
  
  tabelaDados.init();
});
</script>