Clear table body before popular again with Jquery and Ajax

Asked

Viewed 1,773 times

1

I have the following function:

$("#numeroRequisicao").change(function() {
    var numeroRequisicao = $(this).val();
    $.ajax({
        type: "POST",
        url: "../controller/ajax.selectItemRequisicaoPesquisar.php?numeroRequisicao="+numeroRequisicao,
        dataType: "JSON",
        success: function(res) {
            for(var i=0; i<res.length; i++)
            {
                $("#tab_logic").append('<tr class="text-center"><td>'+i+'</td><td>'+res[i].nome_GAThemocomponente+'</td><td>'+res[i].qtd_GATitemRequisicao+'</td><td>'+res[i].frequencia_GATitemRequisicao+'</td><td>'+res[i].cirurgia_GATitemRequisicao+'</td></tr>');
            }
        }
    });
});

And the following table in HTML:

<table class="table table-bordered table-striped" id="tab_logic">
    <thead> 
        <tr>
            <th class="text-center" style="width: 5%;">Indice</th>
            <th class="text-center" style="width: 25%;">Hemocomponente</th>
            <th class="text-center" style="width: 15%;">Quantidade</th>
            <th class="text-center">Frequência (Aviso)</th>
            <th class="text-center">Cirurgia (Aviso)</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

When the user clicks the button btnPesquisar, the Ajax function will be fired, picks up the items and fills the table, is working correctly this, the problem is the following:

If the user chooses the Code 1 request and clicks the button btnPesquisar, will populate the table with the code request items 1, but if the user does not give refresh on the page and wants to see the code request 2, the code request items 2 will be added to the table without it being cleaned, thus, the items of the request previously seen together with those of the request currently seen.

How could I clear the table before filling in the new data?

javascript

1 answer

1


Generates a string with everything and so you can delete everything at once:

success: function(res) {
    var html = res.reduce(function(string, obj, i) {
      return string + '<tr class="text-center"><td>' + i + '</td><td>' + obj.nome_GAThemocomponente + '</td><td>' + obj.qtd_GATitemRequisicao + '</td><td>' + obj.frequencia_GATitemRequisicao + '</td><td>' + obj.cirurgia_GATitemRequisicao + '</td></tr>'
    }, '');
    $("#tab_logic tbody").html(html);
}

  • but so the table will lose the thead too? , the selector would be $("#tab_logic tbody").html(html)

  • @fernandoandrade if there is thead and tbody you can use a selector to take that into account so: $("#tab_logic tbody").html(html);

  • that’s what I meant to say thead and tbodythen the way the answer will remove everything from the table.

  • @fernandoandrade ah, I hadn’t noticed the HTML. Thank you, corrected!

  • Thanks for the @Sergio reply, but it’s not working properly. I copied the code written by you and fitted into mine and is not filling the table. Before the var html..., I put a alert(res) to see if the result was coming, and is coming correctly, is not mounting the table in the case. What do you think it could be? Thank you!

  • @Gabrielq. test again, I corrected an error I had left when adapting from your code.

  • 1

    Now it worked perfectly @Sergio. Thank you very much! My knowledge is very few in JS/Jquery and your answer was accurate and helpful. Thank you!

Show 2 more comments

Browser other questions tagged javascript

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