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
- Pagination Support.
- Support for specifying available page sizes.
- Support for choosing default page size on page load.
- Dynamic Search/filter
- No Coding and Changes Required in existing code.
- 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
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 |
Future Enhancements
- Export to CSV and PDF
- Copy to clipboard
- Print
