1

estou estudando sou novato, e to fazendo um site com php, jquery e ajax, tudo blz, to precisando carregar os dados do banco de dados e coloca-los em uma table, só que os dados tem que ser em tempo real, que se tiver uma inclusão no banco a tabela seja atualizada sem dar refreshe, é possivel fazer isso no ajax? a parte do php consigo fazer tudo certo o meu problema é somente no js e no jquery para preceder que essa tabela seja carregada, desde já obrigado a todos.

1

1 Resposta 1

1

Um modo simples de fazer isso é utilizando o recurso setTimeout do javascript para rodar uma determinada função de tempos em tempos, criando um loop.

Imaginando que tenha uma função qualquer para criar e exibir a tabela de dados, nesta mesma função você pode chamá-la de acordo com o código abaixo determinando um tempo.

setTimeout(funcaoQualquer, 20000); // 20 segundos

Veja o funcionamento!

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>
<script src="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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .