jQueryなどのフィルター列onclick?

Question

私はそうとしていることをどのようにフィルターテーブルの列クラスの時にクリックし、ボタンを押します。って様々なjqueryプラグインができるように、僕必要とすることができるようになります.一textboxesるフィルター等 った対応のコードが正直、私は大きく大きな混乱...す。いるテーブルのようになります。

<table>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
</table>

いつのボタン:

<input type="button" name="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" name="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" name="filtermr" /> <!-- clicking this will only show rows with mr class -->

Answer 1

あなたは各ボタンのクリックのために、それぞれ以下のような何かを行うことができ、それがうまくいかなければならない。

$("tr:not(.dr)").hide();
$("tr.dr").show();

IEます：

$(document).ready(function(){
    $(":button[name='filterdr']").click(function(){
        $("tr:not(.dr)").hide();
        $("tr.dr").show();
    });
});

Answer 2

このような何かトリックを行う可能性があります：

$('input[type=button]').click(function()
{
    $('tr').hide()
        .filter('.' + this.name.replace(/filter/, '')).show();
});

あなたのテーブルにIDを追加すると良いでしょう。

Answer 3

<input type="button" id="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" id="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" id="filtermr" /> <!-- clicking this will only show rows with mr class -->

はJQueryます：

$('#filterdr').click(function() { 
   $('table tr').hide();
   $('table tr.dr').show();
});

とあなたが他のボタンのために同じことを行う。

Answer 4

DataTables など必要なもの:

• カラムまたは連続フィルタリング
• イベントハンドリングのために行作成
• フィルタリングのためのすべてのカラムにシングルから検索テキストボックス
• 多重選別
• 編集可能な列

私はこの生産プロジェクトや場合によっ選出された利用DataTables上Telerik RadGrad.このフレキシブル性に富み、アリア.