Loss of information when ordering a datatable inside a Modal with AJAX

Question

Good Afternoon.

I have an action list that opens a modal and displays a series of pagination information within a datatable, and I want to give the user the option to sort this information, but when clicking on the order icon, regardless of which attribute I use to sort, data disappear, I would like to think of a solution that does not need to make a new query to the database only with the data that has already been loaded. Follows codes.

    $('#modalCandidatos').on('show.bs.modal', function (e) {
    $('#loader').removeClass('d-none');
    $('#candidatos').addClass('d-none');
    $('#vaga-vazia').addClass('d-none');

    var button = $(e.relatedTarget);
    var recipient = button.data('id-vaga');

    $('#lista_candidatos').empty();

    $.ajax({
      url: '/candidatos_vaga/'+recipient,
      type: 'get',
      dataType: 'json',
      success:function(data)
      {

        if(data.candidatos.length == 0){
          $('#loader').addClass('d-none');
          $('#vaga-vazia').removeClass('d-none');
        }
        else{
          $('#loader').addClass('d-none');
          $('#candidatos').removeClass('d-none');
          for (var i = 0; i < data.candidatos.length; i++) {

            var nome = '';

            if(data.candidatos[i].status == 1){
              nome = '<td>'+data.candidatos[i].nome+'<span class="ml-2 badge badge-secondary" index="'+data.candidatos[i].id+'">Novo</span></td>';
            }
            else{
              nome = '<td>'+data.candidatos[i].nome+'</td>';
            }

            $('#lista_candidatos').append(
            '<tr>'+
                nome+
                '<td>'+data.candidatos[i].cidade+'/'+data.candidatos[i].estado+'</td>'+
                '<td class="text-center">'+data.candidatos[i].curriculo+'%</td>'+
                '<td class="text-center">'+
                  '<a href="/candidatos/'+data.candidatos[i].id_candidato+'/'+data.candidatos[i].id+'" class="text-center alterar_candidato" style="text-decoration:underline" title="Ver currículo" target="_blank" index="'+data.candidatos[i].id+'">Ver currículo</a>'+
                '</td>'+
            '</tr>'
            );
          }
        }
      }
    });
  });

Code ajax that receives the action of displaying and popular the modal. Code abaaixo is of the modal

    <div class="modal fade" id="modalCandidatos" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Candidatos à vaga</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="loader">
          <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
          <p>Carregando...</p>
        </div>

        <div id="vaga-vazia" class="d-none p_5">
          <p class="text-muted">Nenhum currículo cadastrado para essa vaga.</p>
        </div>

        <div id="candidatos" class="d-none">
          <div class="table-responsive">
              <table class="table table-striped table-bordered first">
                  <thead>
                      <tr>
                          <th>Nome</th>
                          <th>Cidade</th>
                          <th>Currículo</th>
                          <th>Ações</th>
                      </tr>
                  </thead>
                  <tbody id="lista_candidatos">
                  </tbody>
              </table>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

It updates the page instead of just sorting the data. Grateful.

Answer 1

It’s the way you’re cleared the table with the

$('#lista_candidatos').empty();

puts it after the ajax Success