javascript - Datatables fnFilter 延迟加载器/指示器

Question

我将数据表与我从 here 获得的自定义插件一起使用fnSetFilteringDelay 但希望添加某种指示器或加载程序，以告知用户何时将对过滤器文本框中键入的文本进行搜索。我已经这样做了，但是有点问题，也许有人可以帮助我变得流畅和漂亮。

但是，如果您键入的内容越来越多，指示条开始看起来像是在 splinter 。

如果可能的话，我想去掉 splinter 部分。

这是我将数据表初始化为变量 oTable 后的代码

oTable.fnSetFilteringDelay(550); //After the last character is entered, will take 550 milliseconds to search
$('#gvProjectList_filter input').parent().append($("<div id='lder' style='width: 0px; height: 30px; background-color: #999; float:right;'></div>"));
$('#gvProjectList_filter input').on('keyup', function (a) {
    document.getElementById("lder").style.width = "50px"; //Start the indicator at 50px and end at 0px
    var count = 550; //Same as the filtering delay set above

    var counter = setInterval(timer, 25); //will run it every 25 millisecond
    function timer() {
        count -= 25; //Minus 25 milliseconds
        if (count <= 0) {
            clearInterval(counter);
            document.getElementById("lder").style.width = "0px";
            return;
        }
        var neww = parseInt((count / 550) * 50); //calculate the new width vs. time left of 550ms
        document.getElementById("lder").style.width = neww + "px";
    }
});

基本上它必须从 50px 宽度开始，然后向下，当用户键入另一个字符时，该栏必须再次从 50px 开始。

---

Here is my jsFiddle demo , 只需输入要搜索的内容，首先是一个字母，然后是全名，您就会明白我的意思。

---

Answer 1

我找到了自己的解决方案。我使用了 jquery animate 函数

oTable.fnSetFilteringDelay(550);
$('#mytable_filter input').parent().append($("<div id='lder' style='width: 0px; height: 20px; background-color: #999; float:right;'></div>"));
$('#mytable_filter input').on('keyup', function (a) {
    $("#lder").width('50px');
    $("#lder").stop().animate({width:'0px'},550);
});

就像一个魅力!

---

Here is the final Fiddle ，检查一下!

---