Client-side sorting and pagination of an apex:pageBlockTable

public with sharing class DemoController {

    public Contact[] getContacts() {

        return [

                select FirstName, LastName, Birthdate, Email, LastModifiedDate, OwnerId

                from Contact

                order by Name

                limit 500

                ];

    }

}







<apex:page controller="DemoController">

 

<apex:stylesheet value="{!URLFOR($Resource.jQueryDataTablesZip, 'css/jquery.dataTables.css')}"/>

<style type="text/css">

.sorting {

    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_both.png') }') no-repeat center right !important;

    padding-right: 20px !important;

}

.sorting_asc {

    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_asc.png') }') no-repeat center right !important;

    padding-right: 20px !important;

}

.sorting_desc {

    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_desc.png') }') no-repeat center right !important;

    padding-right: 20px !important;

}

.sorting_asc_disabled {

    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_asc_disabled.png') }') no-repeat center right !important;

    padding-right: 20px !important;

}

.sorting_desc_disabled {

    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_desc_disabled.png') }') no-repeat center right !important;

    padding-right: 20px !important;

}

table.dataTable tr.odd { background-color: white; }

table.dataTable tr.even { background-color: white; }

table.dataTable tr.odd td.sorting_1 { background-color: white; }

table.dataTable tr.odd td.sorting_2 { background-color: white; }

table.dataTable tr.odd td.sorting_3 { background-color: white; }

table.dataTable tr.even td.sorting_1 { background-color: white; }

table.dataTable tr.even td.sorting_2 { background-color: white; }

table.dataTable tr.even td.sorting_3 { background-color: white; }

.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {

    padding: 3px;

}

</style>

 

<apex:sectionHeader title="Data Tables Demo"/>

<apex:pageBlock >

    <apex:pageBlockSection columns="1">

        <apex:pageBlockTable value="{!contacts}" var="c" styleClass="dataTable">

            <apex:column value="{!c.FirstName}"/>

            <apex:column value="{!c.LastName}"/>

            <apex:column value="{!c.Birthdate}"/>

            <apex:column value="{!c.Email}"/>

            <apex:column value="{!c.LastModifiedDate}"/>

            <apex:column value="{!c.OwnerId}"/>

        </apex:pageBlockTable>

    </apex:pageBlockSection>

</apex:pageBlock>

 

<script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.js')}"></script>

<script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.dataTables.js')}"></script>

<script type="text/javascript" language="javascript">

var j$ = jQuery.noConflict();

j$('table.dataTable').dataTable({

    sPaginationType: "full_numbers"

});

</script>

 

</apex:page>