-2

Na minha página tenho o seguinte:

$(document).ready( function () {
            buscaProdutos();
        } );

Quando a página é carregada ele faz uma busca dos produtos para listar na tabela. Dentro dessa função buscaProdutos tenho o seguinte:

    function buscaProdutos() {
            $.get('buscaProdutos.php',
                function(e){
                    e = $.parseJSON(e);
                    $.each(e, function(indice, produto){
                        $("#produtos").append('' +
                            '<tr>'+
                                '<td>'+produto.codigo+'</td>'+
                                '<td>'+produto.nome+'</td>'+                                
                                '<td>'+produto.data_vencimento+'</td>'+
                                '<td>'+produto.valor+'</td>'+                               
                                '<td >'+produto.status+'</td>'+
                                '<td ><a class="btn">Excluir</a></td>'+
                            '</tr>');
                    });

                    tabela = $('#example').DataTable({
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json"
                        }
                    });   
           });
}

Dentro da função que exclui produtos, depois que ela faz a requisição para excluir eu chamo a função buscaProdutos() porém tenho o seguinte erro:

warning cannot reinitialise datatable

Vi algumas soluções que utilizam o proprio draw do DataTables para montar as tabelas mas não queria ter que refazer isso tudo já que uso dessa forma em diversas partes do sistema.

Da primeira vez que chamo a função buscaProdutos não dá erro algum. Mas daí em diante ele fica dando esse erro que não pode reinicializar a tabela.

Então minha dúvida é como eu posso chamar o DataTables depois de cada busca sem dar esse erro?

4
  • Creio que isso pode te ajudar: datatables.net/reference/api/ajax.reload()
    – carlaodev
    Commented 2/06/2018 às 4:03
  • Se sua tabela foi configurada com ajax, você pode usar a forma que o colega acima falou, dando o reload. Mas caso ela não seja uma tabela ajax, a única forma que eu encontrei de contornar esse problema (que é meio gambiarra, admito) é limpar toda a div que envolve a tabela, montar ela inteira de novo e chamar .DataTable pra iniciar a tabela novamente. Commented 4/06/2018 às 16:15
  • Fiz isso Renato, exclui a div inteira, esqueci de colocar a solução aqui. Depois vou colocar!!!
    – L.J
    Commented 5/06/2018 às 0:00
  • tenta desta forma: tabela = $('#example').DataTable({ "language": { "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json" }, destroy: true });
    – Francisco
    Commented 28/09/2018 às 14:46

2 Respostas 2

-2

Ao invés de chamar a atualização da tabela assim:

$(document).ready( function () {
    buscaProdutos(); } 
);

Use assim:

$('#table').DataTable().ajax.reload()// onde #table é o id da tua tabela

Fonte: https://datatables.net/reference/api/ajax.reload()

-3

O aviso "Cannot reinitialize DataTable" ocorre quando você tenta inicializar novamente a tabela DataTables em um elemento HTML que já possui uma tabela DataTables associada a ele.

Para resolver esse problema, você pode verificar se a tabela já foi inicializada antes de tentar recriá-la. Uma maneira de fazer isso é verificar se a tabela já possui a classe 'dataTable' aplicada a ela.

Aqui está um exemplo de como fazer isso:

var tabela;

$(document).ready(function () {
  tabela = $('#example').DataTable({
    "language": {
      "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json"
    }
  });

  buscaProdutos();
});

function buscaProdutos() {
  $.get('buscaProdutos.php', function (e) {
    e = $.parseJSON(e);

    if (tabela && tabela instanceof $.fn.dataTable.Api) {
      // Se a tabela já foi inicializada, destrua-a antes de recriá-la
      tabela.destroy();
    }

    $('#produtos').empty(); // Limpa o conteúdo da tabela

    $.each(e, function (indice, produto) {
      $("#produtos").append('' +
        '<tr>' +
        '<td>' + produto.codigo + '</td>' +
        '<td>' + produto.nome + '</td>' +
        '<td>' + produto.data_vencimento + '</td>' +
        '<td>' + produto.valor + '</td>' +
        '<td>' + produto.status + '</td>' +
        '<td><a class="btn">Excluir</a></td>' +
        '</tr>');
    });

    tabela = $('#example').DataTable({
      "language": {
        "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json"
      }
    });
  });
}

Neste exemplo, primeiro verificamos se 'tabela' já está definida e se é uma instância válida de '$.fn.dataTable.Api'. Se sim, chamamos o método 'destroy()' para remover a tabela DataTables existente.

Em seguida, usamos '$('#produtos').empty()' para limpar o conteúdo da tabela no HTML.

Depois disso, iteramos sobre os dados obtidos na requisição AJAX e adicionamos as linhas à tabela usando o método 'append()'.

Finalmente, inicializamos a tabela DataTables novamente com os novos dados.

Dessa forma, você evita o erro de recriar a tabela DataTables quando ela já foi inicializada anteriormente.

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 .