Update Datatables table after Ajax request

Asked

Viewed 1,401 times

0

On my page I have the following:

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

When the page is loaded it does a search of the products to list in the table. Within this function searchProducts have the following:

    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"
                        }
                    });   
           });
}

Within the function that excludes products, after she makes the request to exclude I call the function searchProducts() but have the following error:

Warning cannot reinitialise datatable

I saw some solutions that use Datatables' own draw to assemble the tables but I didn’t want to have to redo it all since I use it this way in several parts of the system.

The first time I call the function searchProducts does not give any error. But from then on it keeps giving this error that can not reset the table.

So my question is how can I call Datatables after each search without giving this error?

javascript jquery

  • I think this can help you: https://datatables.net/reference/api/ajax.reload()

  • If your table has been configured with ajax, you can use the form the colleague above spoke, giving the Reload. But if it’s not an ajax table, the only way I’ve found to get around this problem (which is a bit of a gambit, I admit) is to clean up the entire div that surrounds the table, put it back together and call. Datatable to start the table again.

  • I did it Renato, delete the entire div, I forgot to put the solution here. Then I will put!!!

  • tries this way: table = $('#example'). Datatable({ "language": { "url": "//Cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json" }, Destroy: true });

1 answer

0

Instead of calling the table update like this:

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

Use like this:

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

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

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.