0

Bom dia,

Eu estou utilizando o DataTable e carregando os meus dados via Ajax do próprio da Datatable porém eu gostaria de dar reload atualizando a tabela com os novos dados do banco de dados

Porém, a tabela é carregada completamente certa porém eu coloquei um setInterval que a cada 30 segundos da um ajax.reload na Tabela, nesse meio tempo eu faço uma alteração no banco porém carregar o setInterval não da reaload na tabela...

$(document).ready(function() {
            var base_url = $(".url_base").val();
            function decode_utf8(s) {
                return decodeURIComponent(escape(s));
            }
        var table;  
            $.fn.dataTable.moment( 'DD/MM/YYYY HH:mm:ss' );
            table = $('#logacesso').DataTable({
               "language" : {
                    "sEmptyTable": "Nenhum registro encontrado",
                    "sInfo": "Mostrando  _START_ até _END_ de _TOTAL_ Resultados",
                    "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                    "sInfoFiltered": "(Filtrados de MAX registros)",
                    "sInfoPostFix": "",
                    "sInfoThousands": ".",
                    "sLengthMenu": "_MENU_ resultados por página",
                    "sLoadingRecords": "Carregando...",
                    "sProcessing": "Processando...",
                    "sZeroRecords": "Nenhum registro encontrado",
                    "sSearch": "Pesquisar",
                    "oPaginate": {
                        "sNext": "Próximo",
                        "sPrevious": "Anterior",
                        "sFirst": "Primeiro",
                        "sLast": "Último"
                    },
                    "oAria": {
                        "sSortAscending": ": Ordenar colunas de forma ascendente",
                        "sSortDescending": ": Ordenar colunas de forma descendente"
                    }
                },
                dom: 'Bfrtip',  
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5'
                ],
               "order": [[ 2, 'desc' ]],
               "ajax": {
                    "jQueryUI": true,
                    "processing": true,
                    "serverSide": true,
                    "url": base_url+'painel/Logacesso/totalLogs',
                    "type": "POST",
                    "dataSrc": function( json ){

                        var return_data = new Array();

                        for(var i=0; i<json.length; i++) {


                            var data_1 = json[i]['datahora_log'].substring(0,10);

                            var hora = json[i]['datahora_log'].substring(10,19);

                            var data_2 = data_1.split('-').reverse().join('/') + hora;

                            var cidade = decode_utf8(json[i]['cidade_log']);


                            return_data.push({

                              'codigo_log': json[i]['codigo_log'],
                              'ip_log' :  json[i]['ip_log'],
                              'datahora_log' : data_2,
                              'cidade_log' : cidade,
                              'estado_log' : json[i]['estado_log'],
                              'email_usu' : json[i]['email_usu'],
                              'razao_usu' : json[i]['razao_usu'],
                            })
                        }

                        return return_data;
                    }
                  },
                "aoColumns": [
                    { "data": 'codigo_log' },
                    { "data": 'ip_log' },
                    { "data": 'datahora_log' },
                    { "data": 'cidade_log' },
                    { "data": 'estado_log' },
                    { "data": 'email_usu' },
                    { "data": 'razao_usu' }
                ]   
            });

        setInterval( function () {
            alert("reload");
            table.ajax.reload();
            }, 30000 );
        });
4
  • Já tentou colocar sua tabela dentro de uma função. e chamar ela dentro do setInterval ? no lugar do table.ajax.reload();
    – Mateus
    5/04/2019 às 13:42
  • Mas no caso eu gostaria também de colocar um botão para que desse reaload na tabela.
    – matheus
    5/04/2019 às 13:44
  • você pode fazer isso também. e só colocar uma acão que quando clicar em atualizar chama a função novamente
    – Mateus
    5/04/2019 às 13:47
  • de uma olhada nesse exemplo: datatables.net/extensions/select/examples/initialisation/…
    – Mateus
    5/04/2019 às 13:54

1 Resposta 1

0

Tem uma solução fácil para isso amigo !

Você inicializa a data table antes de tudo com os dados.

$('#data-table').DataTable();

Certo ??

Depois da inicialização, você pode fazer uma requisição ajax que vai retornar um json, e recriar a tabela.

Vamos supor que o objeto data, é o json retornado do ajax e que você quer atualiza-lo na data table.

var objs = {
 columns: [
    {data:"Nome"},
  {data:"Sobrenome"},
 ],
 data: data,
}

Você cria um objeto que vai ser atualizado, passando o parametro data: com os dados json retornado ! e definindo as colunas ! (lembre-se, os nome das colunas deve ser igual ao retornado pelo json)

Agora é só você recriar

$('#data-table').DataTable(objs);

Observação: o objeto objs deve ter todas as configurações que a data table vai possuir novamente.

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 .