1

procurei em diversos lugares, inclusive na documentação do jQuery e não achei uma solução. Preciso de uma luz do que fazer nessa ocasião. Peço desculpas se não ficar muito claro, nunca fui muito de participar de fórum e de pedir ajuda nessa parte de programação.

O sistema é MVC. Eu realizo a listagem fazendo o load() de uma página html na minha <div class="conteudo">, e dentro desse html externo, possui um <table> e um <script> da listagem desses dados.

Isso funciona normalmente, listando os dados em seus devidos lugares na tabela, porém, quando eu faço um DELETE na tabela, ele retorna no .done(), um load() novamente nessa minha div com a página de listagem (html externo), e o pulo do gato está ai, ele lista os dados após o DELETE, duplicados.

Quando eu aperto o botão "Alunos cdastrados" ele listará os dados com o html importado Quando eu aperto o botão "Alunos cadastrados" ele listará os dados com o html importado

Ao clicar na lixeira (Deletado o id=4), ele deleta o registra e faz a importação do html novamente, porém com dados repetidos Ao clicar na lixeira (Deletado o id=4), ele deleta o registro e faz a importação do html novamente para listar a nova tabela, porém com dados repetidos

Se precisar, aqui está o código html externo que estou importando para dentro da minha página:

<table class="table table-hover table-responsive-sm display compact cell-border" id="alunos" style="width: 100%;">
    <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">Nome</th>
            <th scope="col">RM</th>
            <th scope="col">Celular</th>
            <th scope="col">OP</th>
        </tr>
    </thead>
</table>

<script src="src/alunos/controller/list-alunos.js"></script>
<script src="src/alunos/controller/delete-aluno.js"></script>

O delete-aluno.js que realiza o DELETE:

$(document).ready(() => {
    $('.conteudo').on('click', '.btn-delete-aluno', function() {
        $.ajax({
            url: 'src/alunos/model/delete-aluno.php',
            data: `id_aluno=${$(this).attr('id')}`,
            dataType: 'json',
            type: 'POST'
        }).done((retorno) => {
            $(".conteudo").load('src/alunos/view/list-alunos.html')
        })
    })
})

E o list-aluno.js que faz a listagem, não sei se será necessário consultar esse script:

$(document).ready(() => {
    $(document).empty()
    $.ajax({
        url: 'src/alunos/model/list-alunos',
        dataType: 'json'
    }).done((retorno) => {
        for (const dado of retorno) {
            $("#alunos").append(
                `
                 <tr role="row">
                    <td>${dado.id_aluno}</td>
                    <td>${dado.nome}</td>
                    <td>${dado.rm}</td>
                    <td>${dado.celular}</td>
                    <td>
                        <button class="btn-delete-aluno" id="${dado.id_aluno}">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </td>
                 </tr>
                `
            )
        }
    })
})

1 Resposta 1

0

Olá, parece que você não está limpando a tabela antes de recarregar os dados.

Tente criar um TBODY após o THEAD e dar o .append() nele (após limpá-lo):

 <!-- tabela -->
 ...
 </thead>
 <tbody id="lista-alunos"></tbody>

E para limpar, use o empty()

   ...
        dataType: 'json'
    }).done((retorno) => {
        $("#lista-alunos").empty() //limpar todas as linhas que estavam na tabela
        for (const dado of retorno) {
            $("#lista-alunos").append( //acrescentar novas que vieram do servidor
   ...
2
  • Muito obrigado, funcionou, e além do mais, melhorou o front-end, deixou mais bonito a tabela esse <tbody>, bom dia. Commented 26/05/2021 às 12:55
  • Que bom que funcionou, queira marcar a resposta como aceita. Precisando, estamos aí. Commented 26/05/2021 às 13:10

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 .