javascript - 使用 Javascript 将文本添加到输入字段时启动数据表过滤器

标签 javascript jquery datatables

我正在使用数据表 http://www.datatables.net/对于我的项目中的一个表。

我想使用数据表过滤器根据表格中包含的预定义关键字过滤掉表格中的项目。

用户可以输入过滤器,这很棒,但我想为他们提供带有文本的“快捷方式”按钮。

我这里有一个工作演示http://jsfiddle.net/VjQ5L/4/

您可以在浏览我的按钮时看到所有 - Firefox - Netscape - OSX 等我有 JS 正在工作,因此它会更新过滤器输入字段的值。

唯一的问题是它不过滤,当我关注输入字段时我需要按键盘上的空格才能使其实际工作。

我确信可能有一个快速的解决方案,例如在按下每个按钮后添加过滤器调用或模糊事件或其他内容。我只是不知道该怎么做..

http://jsfiddle.net/VjQ5L/4/

我的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 在这里

http://jsfiddle.net/VjQ5L/5/

更新了下面的 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/

相关文章:

javascript - 如何在给定代码中添加另一个日期选择器实例

javascript - 我不知道这段代码是什么

javascript - 多部分 jQuery 验证

javascript - 如何在数据表中按下按键时取消选择行

php - 如何增加 jquery 数据表中的单元格填充?

javascript - 同时编辑多个 HTML 文本输入

javascript - 尝试使用 id==grid 注册小部件,但该 id 已在 My Dojo Grid 上注册

Javascript 在 onReady 之后加载外部框架

javascript - 类型错误:a 在 JavaScript 中未定义

r - 如何在R Shiny中设置页面宽度?