javascript - 数据表fnFilter延迟加载器/指示符

我将数据表与从here fnSetFilteringDelay获得的自定义插件一起使用，但想添加某种指示符或某种类型的加载器来告诉用户何时对过滤器文本框中的键入文本进行搜索。我已经做到了，但是这有点麻烦，也许有人可以帮助我使它变得流畅和美丽。



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

如果可能的话，我想摆脱破碎的部分。

这是将数据表初始化为变量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，只需键入要搜索的内容，先输入一个字母，然后输入全名，您就会明白我的意思了。

最佳答案

我找到了自己的解决方案。我已经利用了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，检查一下！

关于javascript - 数据表fnFilter延迟加载器/指示符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23339535/