当用户尝试对数据进行排序时显示加载微调器

Posted 2023-05-09

【中文标题】当用户尝试对数据进行排序时显示加载微调器

【英文标题】：display loading spinner when a user tries to sort data

【发布时间】：2012-06-06 22:58:00

【问题描述】：

我需要帮助修改我的 jquery 表格排序器插件。

我正在使用位于http://tablesorter.com/docs/ 的插件

<script type="text/javascript">
    $(document).ready(function()  
        $('table').tablesorter(
        );
    ); 
    </script> 

我得到了一位用户的帮助，现在它工作正常。 由于我有大量数据要排序，所以有点慢。

所以当用户点击它时，我希望用户知道它正在尝试对数据进行排序。所以我想要一个提示或在执行排序时显示“正在加载”或“排序”的提示或显示忙碌符号的内容 有人可以帮我吗？

【参考方案1】：

来自the documentation：

$(document).ready(function()  
    // call the tablesorter plugin, the magic happens in the markup 
    $("table").tablesorter(); 
    //assign the sortStart event 
    $("table").bind("sortStart",function()  
        $("#overlay").show(); 
    ).bind("sortEnd",function()  
        $("#overlay").hide(); 
    ); 
); 

说明：插件实现了两个回调挂钩 - sortStart 和 sortEnd。所以在人类语言中，上面的代码意味着在排序开始之前显示覆盖，并在排序完成后立即隐藏它。

【参考方案2】：

这是一个 fiddle 示例，其中包含如何轻松使用加载叠加层微调器 (create your own spinner)。

只需将$('.overlay').show() 连接到您的点击事件，并确保在您的数据完成排序后调用$('.overlay').hide()。

【讨论】：

感谢@jason。我可能会将您的答案与 Majid 的答案结合起来