Question

我正在使用数据表和Font Awesome 4.4.0，我想创建一个刷新按钮。所以我创建了这个

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

在javascript中我（如@Dekel建议的那样）

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

如果我使用jsfiddle它工作正常但在我的页面中它不起作用，旋转标记被忽略，因此图标是静态的。在这个页面中我使用angularJs，可能是这个问题（我也试过只用html代码，旋转甚至添加但它还没有工作）？我的第一步是仅测试HTML代码：

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

它并没有奏效。所以在这里：我导入font-awesome.min.css 非常感谢 已解决 ：我已使用新版本更新了我的精彩css并且可以正常运行。 @Dekel提供的代码帮助我在表刷新后删除了旋转。

Answer 1

您的问题是，fleetTable.ajax.reload()的调用会立即返回，因此您的代码实际上会$(this).addClass('fa-spin')，并且紧随其后$(this).removeClass('fa-spin')（因此您没有动画）。

相反 - 你可以做的是使用ajax函数的callback：

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

这样，只有在完成ajax调用后才会从您的元素中删除fa-spin类。

Answer 2

有点＆＃34;迟到的比赛＆＃34;回答但是为了澄清Dekel的上述答案，你需要确保像这样定义fleetTable：

 var fleetTable = $('#id to your table').DataTable();

这对我有用，而不向dataTables初始化添加任何内容。我的应用程序中的整个代码在表代码后调用：

$('<button id="refreshButton" class="btn btn-sm btn-default"><i class="fa fa-refresh fa-fw"></i></button>').prependTo('div.dataTables_filter');

$('#refreshButton').click(function(){
   var table = $('#grid-data').DataTable();
   $(this).children().addClass('fa-spin');
   var el = $(this);
   table.ajax.reload(function() {
       el.children().removeClass('fa-spin');
   });
});

根据您的喜好，您可以prependTo或appendTo。

数据表刷新按钮和旋转真棒图标

2 个答案: