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

【问题标题】：Datatables refresh button and spin awesome icon数据表刷新按钮和旋转真棒图标
【发布时间】：2016-11-03 11:38:16
【问题描述】：

我正在使用数据表和 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 提供的代码帮助我在表格刷新后消除了旋转。

【问题讨论】：

即使手动添加fa-spin也不起作用？
它甚至无法使用像很棒的示例页面
你在哪个浏览器中测试它？
. Font Awesome 脚本是否已加载？如果它甚至对静态 fa 类都不起作用，那么它与您的 Angular/jQuery 代码无关
如果您使用的是 angularjs，那么您不应该将 jquery 事件用于点击功能和类。尝试使用 ng-click 和 ng-class。

标签： javascript jquery html angularjs datatables

【解决方案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');
   });
});

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

【讨论】：

是的，我确实知道这个问题，我删除了 ajax reload 但它没有用。奇怪的是，即使是静态的 html spin 也不起作用。
你已经预料到了我稍后会看到的东西。我更新了更多细节
好的，在你用新的细节更新问题后告诉我。
我更新了问题，问题是旋转标签没有为图标设置动画
您能否提供一个工作示例（包含数据表和所有内容？）您是否看到数据表实际上已刷新？

【解决方案2】：

有点“迟到”的回答，但要澄清 Dekel 上面的回答，您需要确保像这样定义舰队表：

 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 取决于您的口味。

【讨论】：