jQuery- 클릭을 켜기는 방법을 필터링하는 방법?

Question

버튼을 클릭 할 때 행 클래스를 기반으로 테이블을 필터링하는 방법을 알아 내려고합니다. 나는 다양한 jQuery 플러그인을보고 있었지만 그중 어느 것도 내가해야 할 일을하는 것 같지 않습니다. 일부는 필터를 필터링하는 텍스트 상자를 가지고 있으며 코드를 조정하려고 시도했지만 솔직히 큰 혼란을 일으킨다. 다음과 같은 테이블이 있습니다.

<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();

즉:

$(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

데이터 가능 필요한 것을 정확히 수행합니다.

• 열 또는 행 필터링
• ON ROW CREATION의 이벤트 처리
• 단일 검색 텍스트 상자의 모든 열에 대한 필터링
• 멀티 컬럼 정렬
• 편집 가능한 행

나는 이것을 생산 프로젝트에 사용했으며 일부 사례는 Telerik Radgrad를 통해 Datatables를 사용하기로 선택했습니다. RIA에게는 매우 유연하고 좋습니다.