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 の管理者の 1 人からのヒントのおかげで、私は実際にこれに自分で答えることができました...

更新されたフィドルはこちら

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 に答える