Filter for pageblocktable in salesforce

Often when we create a pageblock table in a visualforce page we wish to filter the records if it is having many records.To filter such a pageblock table we normally use one picklist field or selectlist field and filter the records by passing the selected values to the controller to query the records.

But we can also do this simply by writing a jQuery function.please follow below steps

1)Create a picklist/select list first

2)Write a jQuery function so as to compare the selected value from the picklist and the table values.

3)This can be done by defining a id for the column header in the pageblocktable and in the jQuery funtion traverse through the child elements. Compare both values.

4)If the values are same display the Parent i.e. The current ro else hide.by defining the css display property.
Thus pageblock table can be filtered out very quickly.

JQuery Function:

 $("[id$='AccountFilter']").change(function() {
    var selval=$(this).val();
    $("[id$='AccNameHeader']").each(function(){
          var t= $(this).children('span').text();
           if(selval != 'All'){
             if(selval == t){
                    $(this).parent().css('display','');
             }else{
                    $(this).parent().css('display','none');
             }
           }else{
                $(this).parent().css('display','');
           }                    
        }); 
    });

Visualforce page:

<apex:pageBlock title="JQuery Filter For PageblockTable" id="AccountNamewithFilter">
     <apex:form >
        <apex:selectList value="{!AccPick}" size="1" id="AccountFilter">
             <apex:selectOptions value="{!AccNames}"/>                        
        </apex:selectList>
     </apex:form>
     <apex:pageBlockTable value="{!AccountList}" var="a">
        <apex:column headerValue="Account Name" id="AccNameHeader">
             <apex:outputText styleClass="AccountNameClass" value="{!a.Name}" id="AccName"/>         </apex:column>
        <apex:column headerValue="Phone">
             <apex:outputText styleClass="AccountNameClass" value="{!a.Phone}"/>            
        </apex:column>        
     </apex:pageBlockTable>
</apex:pageBlock>

please check out the live action in my Demo page here.
Pros:

1. Filtered very quickly.
2. No need to Query the DB each time.

Cons:

1. Real time data wont be returned.for this we can keep a refresh button to refresh the page.