javascript - jQuery和Dynamitable库

我正在使用此lib：https://github.com/Dynamitable/Dynamitable

这非常不错，目前对我来说非常适合。

当我尝试对其进行过滤时（例如在输入字段上键入“ abc”时过滤“名称”​​时），所有行都消失了，以便向我显示每个包含“ abc”的“名称”行。 ！

我的问题是，我使用了一个非常大的表，并且过滤器对我来说太“好”了。我的意思是，我无法在我的整个“研究”开始工作之前就输入它。

因此，我的问题是，是否可以添加“延迟”，以便人们在开始过滤之前输入一些字母？大概是0.5秒甚至1秒？

我曾尝试在150/153行上玩这个游戏，但没有成功：

$(selector).on('change keyup keydown', filterAction);

// initialization
filterAction();

最佳答案

我的建议是断开原始过滤器的连接，并添加您自己的过滤器，使其具有仅在n char之后才开始过滤的功能。

在以下示例中：

$('.js-dynamitable .js-filter').off('change keyup keydown').on('change keyup keydown', function (e) {
    //
    // start filtering on text input only after 2 chars
    //
    if ($(this).is(':text') && $(this).val().length < 2) {
        return;  // stop filtering
    }
    var index = $(this).closest('tr').children('td, th').index($(this).closest('td, th'));
    var dynamitable = $('.js-dynamitable').dynamitable();
    dynamitable.displayAll();
    $(dynamitable).find('.js-filter').each(function () {
        var $this = $(this);
        dynamitable.filter(index, $this.val());
    });
});

.glyphicon {
    cursor: pointer;
}

input, select {
    width: 100%;
}

.second, .glyphicon-chevron-down, .glyphicon-chevron-up {
    color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://rawgit.com/Dynamitable/Dynamitable/master/dynamitable.jquery.js"></script>

<div class="col-xs-12  col-sm-12 col-md-10 col-md-offset-1 col-lg-10  col-lg-offset-1">
    <h1><span class="first">Dynami</span><span class="second">table</span></h1>
    <div class="table-responsive">
        <table class="js-dynamitable     table table-bordered">
            <thead>
            <tr>
                <th>Name
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
                <th>Email
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
                <th>Age
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
                <th>Account
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
                <th>Scoring
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
            </tr>
            <tr>
                <th>
                    <input class="js-filter  form-control" type="text" value="">
                </th>
                <th>
                    <select class="js-filter  form-control">
                        <option value=""></option>
                        <option value="@dynamitable.com">dynamitable.com</option>
                        <option value="@sample.com">Sample</option>
                    </select>
                </th>
                <th><input class="js-filter  form-control" type="text" value=""></th>
                <th><input class="js-filter  form-control" type="text" value=""></th>
                <th><input class="js-filter  form-control" type="text" value=""></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Freddy Krueger</td>
                <td>[email protected]</td>
                <td class="text-right">122</td>
                <td class="text-right">2300$</td>
                <td class="text-right">+15</td>
            </tr>
            <tr>
                <td>Clint Eastwood</td>
                <td>[email protected]</td>
                <td class="text-right">62</td>
                <td class="text-right">48 500$</td>
                <td class="text-right">+12</td>
            </tr>
            <tr>
                <td>Peter Parker</td>
                <td>[email protected]</td>
                <td class="text-right">22</td>
                <td class="text-right">210$</td>
                <td class="text-right">-5</td>
            </tr>
            <tr>
                <td>Bruce Wayne</td>
                <td>[email protected]</td>
                <td class="text-right">42</td>
                <td class="text-right">-8500$</td>
                <td class="text-right">+2</td>
            </tr>
            <tr>
                <td>Jackie Chan</td>
                <td>[email protected]</td>
                <td class="text-right">32</td>
                <td class="text-right">-250.55$</td>
                <td class="text-right">0</td>
            </tr>
            <tr>
                <td>Bruce Lee</td>
                <td>[email protected]</td>
                <td class="text-right">32</td>
                <td class="text-right">510$</td>
                <td class="text-right">-7</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>