Visualforce - jQuery Block UI Demo

01_JQueryBlockUiDemo.page

<apex:page controller="JQueryBlockUiDemoController" showHeader="true" sidebar="true" title="JQuery Block UI Demo" tabStyle="Account" action="{!doInit}" id="page">
    
    <apex:includeScript value="{!$Resource.jQuery211}"/>
    <apex:includeScript value="{!$Resource.jQueryBlockUI}" />
     
    <div id="vf-page">
        <apex:form id="form">
            <apex:pageBlock id="block">
                <apex:pageBlockButtons location="bottom" id="blockButtons">
                    <apex:commandButton value="Search" title="Search" action="{!doSearch}" onclick="blockUi();" oncomplete="unblockUi();" reRender="form" status="loadingStatus" id="searchBtn" />
                    <apex:commandButton value="Reset" title="Reset" action="{!doInit}" reRender="form" id="resetBtn" />
                </apex:pageBlockButtons>
                <apex:pageBlockSection title="Search" columns="2" collapsible="false" id="section">
                    <apex:inputText value="{!searchName}" label="{!$ObjectType.Account.Fields.Name.Label}" id="searchName" />
                    <apex:inputText value="{!searchAccountNumber}" label="{!$ObjectType.Account.Fields.AccountNumber.Label}" id="searchAccountNumber" />
                </apex:pageBlockSection>
            </apex:pageBlock>
            <apex:pageBlock rendered="{!accounts.size > 0}" id="resultBlock">
                    <apex:pageBlockSection title="Result" columns="2" collapsible="false" id="resultSection">
                        <apex:inputCheckbox value="{!isSortAsc}" label="Ascending order">
                            <apex:actionSupport event="onchange" action="{!doSearch}"  onsubmit="blockUi();" oncomplete="unblockUi();" reRender="form" status="loadingStatus" />
                        </apex:inputCheckbox>
                        <apex:pageBlockSectionItem >
                            <apex:outputText value="Status" />
                            <apex:actionStatus startText="Wait..." stopText="OK" id="loadingStatus"  />
                        </apex:pageBlockSectionItem>
                    </apex:pageBlockSection>
                    <apex:pageBlockSection columns="1">
                        <apex:pageBlockTable value="{!accounts}" var="item">
                            <apex:column headerValue="{!$ObjectType.Account.Fields.Name.Label}">
                                <apex:outputField value="{!item.Name}" />
                            </apex:column>
                            <apex:column headerValue="{!$ObjectType.Account.Fields.AccountNumber.Label}">
                                <apex:outputField value="{!item.AccountNumber}" />
                            </apex:column>
                            <apex:column headerValue="{!$ObjectType.Account.Fields.Type.Label}">
                                <apex:outputField value="{!item.Type}" />
                            </apex:column>
                            <apex:column headerValue="{!$ObjectType.Account.Fields.Rating.Label}">
                                <apex:outputField value="{!item.Rating}" />
                            </apex:column>
                        </apex:pageBlockTable>
                    </apex:pageBlockSection>
                </apex:pageBlock>
        </apex:form>
    </div>
    <!-- JavaScript -->
    <apex:include pageName="JQueryBlockUiDemoScript" />
</apex:page>

02_JQueryBlockUiDemoScript.page

<apex:page >
    <script type="text/javascript">
        var $j = jQuery.noConflict(); 
    
        function blockUi() {
            $j.blockUI({
                css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#fff'
                }
            }); 
        }
        
        function unblockUi() {
            $j.unblockUI();
        }
    </script>
</apex:page>

03_JQueryBlockUiDemoController.cls

public with sharing class JQueryBlockUiDemoController {
    
    private JQueryBlockUiDemoDao dao = new JQueryBlockUiDemoDao();
    
    public String searchName {get; set;}
    public String searchAccountNumber {get; set;}
    public Boolean isSortAsc {get; set;}
    public List<Account> accounts {get; set;}
    
    public JQueryBlockUiDemoController() {
        
    }
    
    public void doInit() {
        this.searchName = '';
        this.searchAccountNumber = '';
        this.isSortAsc = true;
        this.accounts = new List<Account>();
    }
    
    public void doSearch() {
        this.accounts = this.dao.getAccount(this.searchName, this.searchAccountNumber, this.isSortAsc);
    }
}

04_ JQueryBlockUiDemoDao.cls

public with sharing class JQueryBlockUiDemoDao {
    
    public JQueryBlockUiDemoDao() {
        
    }
    
    public List<Account> getAccount(String searchName, String searchAccountNumber, Boolean isSortAsc) {
        String query = '';
        query += ' SELECT ';
        query += ' Id ';
        query += ' ,Name ';
        query += ' ,AccountNumber ';
        query += ' ,Type  ';
        query += ' ,Rating  ';
        query += ' FROM ';
        query += ' Account ';
        
        String joinQuery = ' WHERE ';
        if (String.isNotEmpty(searchName)) {
            query += joinQuery;
            query += ' Name = ' + '\'' + String.escapeSingleQuotes(searchName) + '\'';
            joinQuery = ' AND ';
        }
        
        if (String.isNotEmpty(searchAccountNumber)) {
            query += joinQuery;
            query += ' AccountNumber = ' + '\'' + String.escapeSingleQuotes(searchAccountNumber) + '\'';
            joinQuery = ' AND ';
        }
        
        String sortKey = isSortAsc ? 'ASC' : 'DESC';
        query += ' ORDER BY Name ' + sortKey;
        query += ' LIMIT 500 ';
        
        return database.query(query);
    }
}