PageBlockTable Pagination | Techila
2531
single,single-post,postid-2531,single-format-standard,ajax_updown_fade,page_not_loaded,,qode_grid_1300,footer_responsive_adv,hide_top_bar_on_mobile_header,qode-content-sidebar-responsive,qode-theme-ver-9.4.2,bridge,wpb-js-composer js-comp-ver-4.12,vc_responsive
 

PageBlockTable Pagination

PAGEBLOCKTABLE PAGINATION

PageBlockTable Pagination

How to sort, filter and paginate a PageBlockTable

These days I wanted an advanced PageBlockTable, something able to show hundreds of records, with features like:
– quick filter
– sorting
– pretty pagination for better usability

 

Start writing a PageBlockTable (note html-cid tag on the table):

<apex:pageBlock title=”Advanced Table”>

<apex:pageBlockSection title=”Accounts table” columns=”1″>

<apex:pageBlockTable value=”{!accounts}” var=”a” html-cid=”accountsTable”>

<apex:column value=”{!a.Name}” headerValue=”Name”/>

<apex:column value=”{!a.Email__c}” headerValue=”Email”/>

<apex:column value=”{!a.Phone}” headerValue=”Phone”/>

</apex:pageBlockTable>

</apex:pageBlockSection>

</apex:pageBlock>

 

Then include some JS/CSS:

<!– Jquery –>

<apex:includeScript value=”//code.jquery.com/jquery-1.11.3.min.js”/>

<apex:stylesheet value=”//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css”/>

 

<!– DataTable –>

<apex:includeScript value=”//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js”/>

<apex:stylesheet value=”//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css”/>

 

<!– Search Highlight –>

<apex:includeScript value=”//bartaz.github.io/sandbox.js/jquery.highlight.js”/>

<apex:includeScript value=”//cdn.datatables.net/plug-ins/1.10.9/features/searchHighlight/dataTables.searchHighlight.min.js”/>

<apex:stylesheet value=”//cdn.datatables.net/plug-ins/1.10.9/features/searchHighlight/dataTables.searchHighlight.css”/>

 

<!– DataTable buttons –>

<apex:includeScript value=”https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js“/>

<apex:includeScript value=”//cdn.datatables.net/buttons/1.0.3/js/buttons.flash.min.js”/>

<apex:includeScript value=”//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js”/>

<apex:includeScript value=”//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js”/>

<apex:includeScript value=”//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js”/>

<apex:includeScript value=”//cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js”/>

<apex:includeScript value=”//cdn.datatables.net/buttons/1.0.3/js/buttons.print.min.js”/>

<apex:stylesheet value=”https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css“/>

 

Ok, tons of JS. JQuery, DataTable, a search highlight plugin for DataTable filter results, and another plugin to show some advanced buttons on the table.

Add some styles:

 

<style>

.filterMatches{

background-color: #BFFF00;

}

.tertiaryPalette{

color: #000 !important;

}

.dt-buttons{

margin-left: 10px;

}

</style>

 

And some JavaScript to configure DataTable (it starts DataTable on the table with the correct html-cid, and it configures some stuff):

 

<script type=”text/javascript”>

$(document).ready(function(){

var accountsTable = $(‘[cid$=”accountsTable”]’).parent(‘table’).eq(0).DataTable({

//enables results highlight

searchHighlight: true,

//sets record lengths to show in picklist

aLengthMenu: [

[10, 25, 50, 100, 200, -1],

[10, 25, 50, 100, 200, “All”]

],

“iDisplayLength”: 10,

//adds copy, print buttons…

dom: ‘lBfrtip’, //l=length, B=buttons, f=filter(search), r=processing, t=the table, I=table summary, p=page controls

buttons: [

‘copy’, ‘csv’, ‘excel’, ‘pdf’,

{

extend: ‘print’,

customize: function(win) {

$(win.document.body)

.css( ‘font-size’, ’10pt’ )

.prepend(‘<img src=”http://datatables.net/media/images/logo-fade.png” style=”position:absolute; top:0; left:0;” />’);

$(win.document.body).find( ‘table’ )

.addClass( ‘compact’ )

.css( ‘font-size’, ‘inherit’ );

}

}

],

});

 

});

</script>

 

Pagination works as expected, organizes tons of records in pages. You can choose how many records to show in a single page (using the picklist), and clicking on the Previous/Next buttons, or on the page number, will change page and show other results. Simple and useful.

The filter searches for matches in all the columns. If the filter returns more rows than the max records to show in a page, you can use pagination buttons to move within filtered results.

The buttons are great. For example, Copy button copies what you have filtered in the search box, or all the records if no filters are entered. Other buttons (Export/Print) work similarly, but they can be a bit slow (10-15 seconds) when working with thousands of rows.

The sort option works as expected, clicking on table header columns sorts records based on that column.

 

“Know more about Salesforce Consulting at Techila”

Author: techila

No Comments

Post A Comment