How do I make an animation start at the beginning of the process and only finish when finished in jquery?

Question

How do I make an animation start at the beginning of the process and only finish when finished in jquery?

Navigation

#1 by (0 votes)

0

I have some difficulties in JQuery, using DataTables, where when clicking select a value in drop-list and clicking the "search" button, it does an ajax and updates the Datatables with the data selected in the drop list. p>

However, I'd like to apply an effect to an HTML element, which simply displays a "loading" icon while the table does not load.

In my code, it apparently only displays the "effect icon" at the end of loading, curiously it does not display the beginning.

Follow html code:

        <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>

Follow 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' }
      ]
    });
  };

I'd like to know where I'm going wrong in the code, because the effect does not start, it just ends.

Ps: Datatables are loading normally without any difficulties.

javascript jquery jquery-datatables

asked by anonymous 05.10.2018 / 21:34

1 answer

Return Json with the attributes of a class without "_" in the initials Error when listing routes in a Api Laravel

score 0 · Answer 1

To display a message or a loading before data loading in DataTables use: sLoadingRecords

Note : When using data originated from Ajax and during the first tie when the   DataTables collects the data, this message is displayed in a line   empty table to indicate to the end user that the data is being   loaded. Note that this parameter is not used when loading data by server-side processing, only data originated from Ajax with client-side processing.

Source: link

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><linkhref="//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>