Question

我在项目中使用Datatables http://www.datatables.net/作为表格。

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

用户可以输入很棒的过滤器，但我想给它们带有文本的“快捷方式”按钮。

我在这里有一个工作演示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')
                }
            });
        });

Answer 1

我实际上能够自己回答这个问题，感谢Datatables的一位管理员提示......

更新的小提琴就在这里

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将文本添加到输入字段时启动数据表过滤器

1 个答案: