我正在使用数据表 http://www.datatables.net/对于我的项目中的一个表。
我想使用数据表过滤器根据表格中包含的预定义关键字过滤掉表格中的项目。
用户可以输入过滤器,这很棒,但我想为他们提供带有文本的“快捷方式”按钮。
我这里有一个工作演示http://jsfiddle.net/VjQ5L/4/
您可以在浏览我的按钮时看到所有 - Firefox - Netscape - OSX 等我有 JS 正在工作,因此它会更新过滤器输入字段的值。
唯一的问题是它不过滤,当我关注输入字段时我需要按键盘上的空格才能使其实际工作。
我确信可能有一个快速的解决方案,例如在按下每个按钮后添加过滤器调用或模糊事件或其他内容。我只是不知道该怎么做..
我的JS代码
$(function() {
/* Table initialisation */
$('#example').dataTable({
"sDom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
});
/* Adding Filter to Filter Input Field */
/* This code may not be the prettiest but best I can come up with */
$('a.cmsFilter').click(function(){
if($(this).text() =="All"){
$('#example_filter input').val('All')
}
else if($(this).text() =="Firefox"){
$('#example_filter input').val('Firefox')
}
else if($(this).text() =="Netscape"){
$('#example_filter input').val('Netscape')
}
else if($(this).text() =="OSX"){
$('#example_filter input').val('OSX')
}
else if($(this).text() =="Win"){
$('#example_filter input').val('Win')
}
});
});
最佳答案
我实际上能够自己回答这个问题,感谢 Datatables 一位管理员的提示...
更新的 Fiddle 在这里
更新了下面的 JS 粘贴。
$(function () {
/* Table initialisation */
var oTable = $('#example').dataTable({
"sDom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
});
/* Adding Filter to Filter Input Field */
$('a.cmsFilter').click(function () {
if ($(this).text() == "All") {
oTable.fnFilter('');
} else if ($(this).text() == "Firefox") {
oTable.fnFilter('Firefox');
} else if ($(this).text() == "Netscape") {
oTable.fnFilter('Netscape');
} else if ($(this).text() == "OSX") {
oTable.fnFilter('OSX');
} else if ($(this).text() == "Win") {
oTable.fnFilter('Win');
}
});
});
关于javascript - 使用 Javascript 将文本添加到输入字段时启动数据表过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16669144/