luca luca - 1 month ago 11
AngularJS Question

Datatables refresh button and spin awesome icon

I'm using datatables and Font Awesome 4.4.0 and I would like to create a refresh button. So I create this

<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Fleets</h3>
<span style="cursor:pointer"><i class="fa fa-refresh pull-right" aria-hidden="true" id="refreshButton"></i></span>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Fleets table -->
<table id="fleetsTable"
class="table table-bordered table-striped">
<thead>
<tr>
<th>Applications</th>
<th>Fleet name</th>
<th>Creation date</th>
<th>Statistic</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
....


and in javascript I have(as @Dekel suggested)

$('#refreshButton').click(function(){
$(this).addClass('fa-spin');
var el = $(this);
fleetTable.ajax.reload(function() {
el.removeClass('fa-spin');
});
});


If I use jsfiddle it works fine but in my page it doesn't work, the spin tag is ignored, so the icon is static.
In this page I use angularJs, may be this the problem (I tried also with only html code, with spin even added but it doesn't work yet)?
My first step was test only HTML code:

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>


and it didn't work.
So here:
enter image description here
I import font-awesome.min.css
Many thanks
enter image description here
RESOLVED: I have updated my awesome css with the new version and it works. The code provided by @Dekel has helped me to remove spin after table refresh.

Answer

Your problem is that the call to fleetTable.ajax.reload() returns immediately, so your code actually does $(this).addClass('fa-spin') and immediately after it you have $(this).removeClass('fa-spin') (so you get no animation).

Instead - what you can do is use the callback of the ajax function:

$('#refreshButton').click(function(){
   $(this).addClass('fa-spin');
   var el = $(this);
   fleetTable.ajax.reload(function() {
       el.removeClass('fa-spin');
   });
});

This way the fa-spin class will be removed from your element only after the ajax call is done.