jQuery和Dynamitable库 [英] jQuery and Dynamitable library
本文介绍了jQuery和Dynamitable库的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用以下库: https://github.com/Dynamitable/Dynamitable
这非常好，目前对我来说非常好.
当我尝试对其进行过滤时(例如，当我在输入字段中键入"abc"时使用过滤器名称")，所有行都消失了，以便向我显示包含"abc"的每个名称"行.这很好！
我的问题是，我正在使用一个很大的表，并且过滤器对我来说太好"了.我的意思是，我无法在我的整个研究"开始工作之前就输入它.
所以，我的问题是，是否可以添加延迟"，以便人们在开始过滤之前输入一些字母?大约是0.5秒甚至1秒?
我曾尝试在150/153行上玩这个游戏，但没有成功:
$(selector).on('change keyup keydown', filterAction);
// initialization
filterAction();
解决方案
我的建议是断开原始过滤器的连接，并添加自己的过滤器，使其能够在n个字符后开始过滤.
在以下示例中:
$('.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>freddy.krueger@sample.com</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>clint.eastwood@sample.com</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>peter.parker@dynamitable.com</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>bruce.wayne@dynamitable.com</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>jackie.chan@sample.com</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>bruce.lee@sample.com</td>
<td class="text-right">32</td>
<td class="text-right">510$</td>
<td class="text-right">-7</td>
</tr>
</tbody>
</table>
</div>
</div>
I am using this lib: https://github.com/Dynamitable/Dynamitable
It's pretty nice, and it works perfectly for me, for now.
When I'm trying to filter it (like filter "name" when I'm typing "abc" on the input field) all rows are dissapearing in order to show me every "name" rown which contains "abc. So this is nice !
My problem is, I'm using a very big table, and the filter works "too" good for me. I mean, I can't type my entire "research" before it start working.
So, my question is, is it possible to add a "delay", in order to let people type some letter before starting filtering ? Something like 0.5 sec or even 1 sec ?
I had try to play with this on line 150/153, but no success :
$(selector).on('change keyup keydown', filterAction);
// initialization
filterAction();
解决方案
My proposal is to disconnect the original filters and add your own filter with the capability to start the filtering only after n char.
In the following an example:
$('.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>freddy.krueger@sample.com</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>clint.eastwood@sample.com</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>peter.parker@dynamitable.com</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>bruce.wayne@dynamitable.com</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>jackie.chan@sample.com</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>bruce.lee@sample.com</td>
<td class="text-right">32</td>
<td class="text-right">510$</td>
<td class="text-right">-7</td>
</tr>
</tbody>
</table>
</div>
</div>
这篇关于jQuery和Dynamitable库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
