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