PageBlockTableEnhancerADV : Yet another Pageblock table Enhancer Component

Thursday, November 28, 2013

On my quest to create a perfect PageBlockTable, I tried a lot of jQuery plugin available out there. The main moto was to bring as many as feature I can. Some of them were good but were almost dead and were at end of their lifetime. Others were not compatible with Visualforce, some were not able to pick the standard pageblock table and other had css issues. Finally after long search I stopped on two plugins

• TableSorter
   Description : tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
  
  I find it very interesting because its very minimal and doesn't changes the DOM much and easily attaches itself VF Pageblocktable. All the version of PageblockTableEnhancer uses this to add Sorting and Pagination capability to a standard VF Pageblocktable. The combination really went well and I guess many of out there are using it now. This plugin is still actively developed and well be enhanced further but I don't think there is much scope to bring new features because its architecture is bit limiting
  

• Datatables
  Description : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table
  
  
  

  

  Datatable - looks futuristics isn't it ?

  
  
  Well Datatables ! everybody out there working on Dynamic Tables can't stop talking about it because of the amazing flexibilty and combination of features this gives. Features like Sorting,Pagination,Search can easily be implemented on very large table just using this table. And there is no boundaries support PDF/CSV export has been recently added and everyday some new plugin is introduced. Its the plugin of the future! Its still actively developed, there are lot of user already using this, new features are added and I see a lot of scope here!

So whats new ? 

I have been trying to combine Datatables with Standard VF Pageblock table. But somehow wasn't able to make them work together. But finally I was able to combine them and result is just awesome looking new table!.  Yes I was successfully able to combine them and create a new component called PageblocktableEnhancerADV(adv for Advanced, lol I know that sounds a bit funny ) .

I kept both of the plugin alive because people can choose from which one they want. If you like the Default look and feel you can go with PageblockTableEnhancer  else you can use the new PageblocktableEnhancerADV.

Personally I feel like there is lot of scope in PageblocktableEnhancerADV, since its based on Datatables there is lot scope and there is a long list feature waiting to be ported.

So Introducing the "PageblocktableEnhancerADV" with the backbone of "PageblocktableEnhancer", same ease of use, same set of parameters, just one line and  you are ready to rock!

Detail about the PageBlockTableEnhancerADV Component
(If you are using the PageblocktableEnhancer you should be aware about the basic parameters)

Here is what is new with this plugin

1. Pagination Support.
2. Support for specifying available page sizes.
3. Support for choosing default page size on page load.
4. Dynamic Search/filter
5. No Coding and Changes Required in existing code.
6. Hassle free installation

List o Parameters

• targetPbTableIds : comma-separated Ids of the target Pageblock tables
• paginate : Assign true if you want to use the pagination feature,default value is true.
• pageSizeOptions : A comma seperated list of integer values that will displayed as dropdown for page size
• defaultPageSize : Default page size that needs to be selected (at page load).

Ajax/Rerender support

• This version brings in support for rendering, the earlier version wasn't able to handle this. So incase you are rerendering your table or the parent components, you can call the "initPageBlockTableEnhancerADV()" method from "oncomplete" even of your commandButtons/actionFunctions/actionSupport/commandLink .
  
  

  <apex:commandButton value="Rerender" reRender="mid" oncomplete="initPageBlockTableEnhancerADV()"/>

Basic Syntax

The basic syntax remains same, just few added params.

<c:PageBlockTableEnhancerADV targetPbTableIds="mid,mid2" paginate="true" defaultPageSize="5" pageSizeOptions="5,10,20,30,40,50,100"/>    
   <apex:pageBlock >   
     <apex:pageBlockTable value="{!contacts}" var="con" id="mid">   
      <apex:column value="{!con.Name}"/>   
     </apex:pageBlockTable>    
     <apex:pageBlockTable value="{!contacts}" var="con" id="mid2">   
      <apex:column value="{!con.Name}"/>   
     </apex:pageBlockTable>     
   </apex:pageBlock>  

PageBlockTableEnhacerADV - Optimized version of Datatable for VF

Demo,Source And Installation Links : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009M3zR

Future Enhancements

• Export to CSV and PDF
• Copy to clipboard
• Print