0

Estou com algumas dificuldades em JQuery, utilizando o DataTables, onde ao clicar selecionar um valor em drop-list e clicar no botão "buscar", ele faz um ajax e atualiza o Datatables com os dados selecionados no drop list.

Porém, eu gostaria de aplicar um efeito em um elemento HTML, que simplesmente exibe um icone de "carregando" enquanto a tabela não terminar de carregar.

Em meu código, aparentemente ele só exibe o "icone de efeito" ao finalizar o carregamento, curiosamente ele não exibe o começo.

Segue código html:

        <button id="search" class="btn btn-primary mr-auto cursor-pointer"><i class="fa fa-search"></i></button>
    <div class="fa-2x" id="spinner-loading">        
      <i class="fa fa-spinner fa-spin"></i>
    </div>

Segue js:

  $(document).ready(function() {
    dataTable();
  });
  $("#search").on('click', function(event){
    $(this).attr('disabled', true);
    $('#spinner-loading').fadeIn(300);
    event.preventDefault();
    var vUsuario = $('#usuarios').val();
    dataTable(usuario = vUsuario);
    $('#search').attr('disabled', false);
    $('#spinner-loading').fadeOut(300);
  });
  function dataTable(usuario = '') {
    $('#tabelaCarteiras').DataTable({
      "destroy" : true,
      dom: 'Bfrtip',
      buttons: [
          'excel', 'pdf'
      ],
      fixedHeader: true,

      // request
      ajax: {
          url: '<?=base_url('carteiras/todasCarteiras/')?>' + usuario,
          dataSrc: 'data'
      },
      columns: [
        { data: 'cod_cliente' },
          { data: 'razao_social' },
          { data: 'cod_vendedor' },
          { data: 'telefone1' },
          { data: 'telefone2' }
      ]
    });
  };

Eu gostaria de saber onde estou errando no código, pois o efeito não inicia, apenas finaliza.

Ps: o Datatables está carregando normalmente sem dificuldades.

1

1 Resposta 1

0

Para exibir uma mensagem ou um loading antes dos dados carregando no DataTables use: sLoadingRecords

Nota: Ao usar dados originados do Ajax e durante o primeiro empate quando o DataTables coleta os dados, essa mensagem é mostrada em uma linha vazia na tabela para indicar ao usuário final que os dados estão sendo carregados. Observe que esse parâmetro não é usado ao carregar dados pelo processamento do lado do servidor, apenas dados originados do Ajax com processamento no lado do cliente.

Fonte: http://legacy.datatables.net/ref#bProcessing

var table = $('#example').DataTable({
  ajax: {
    url: 'https://api.myjson.com/bins/27bsh'
  },
 language : {
        sLoadingRecords : '<div id="loader"></div>'
    },    
  columns: [{
      data: 'first_name'
    },
    {
      data: 'last_name'
    }
  ]
})
#loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin-left: 250px;
  margin-top: 0px;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table id="example">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Sobrenome</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

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 .