0

我在我的项目中使用 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')
                }
            });
        });
4

1 回答 1

2

我实际上能够自己回答这个问题，这要感谢 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');
    }
});
});
于 2013-05-21T12:09:24.593 回答