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




Future Enhancements

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

45 comments:

  1. First - So let's start by saying I SOOOO APPRECIATE you doing this!!! Easiest way to better format a table in Salesforce. THANK YOU!!!!
    Second - In the old version, the original sort of the data from the original APEX query remained intact. With ADV, the data gets resorted it seems by whatever is the first column. Any tricks how to keep the original sort?

    Thanks Robert

    ReplyDelete
    Replies
    1. I am glad that you liked it. I wasn't sure that if people were using it.
      Anyways the dataTables has its own set of API, I guess I have to dig into it check if something can be done. Don't worry I am working on it, I will post and update once I am done.

      Delete
    2. Robert, I have a good news for you. I just made some changes in the plugin and now it will retain the initial sorting. You can install the updated version from the Project Page

      Delete
    3. You rock, will try it over the holidays. Thanks. Happy Holidays, Robert

      Delete
    4. Thanks a lot, worked like a charm!

      Delete
    5. I tried using this table and the initial sort changes to the first column.

      Delete
  2. Wow, I like this component much better...It does duplicate the header and footer panels on a re-render when I just re-render the pageblocktable. When I changed the code to re-render the pageblock that contains the table it worked great without the duplication. Again I'll be glad to send my code, just get me an email address.

    HOWEVER, when pairing this component up with your new VFUIBlock the block stop functioning. Is there an order I need to have the components declared in my VF page?

    ReplyDelete
    Replies
    1. Well ok try loading the PageblockEnhancerADV first and then VFUIBlock after the component. Make sure you set "importJQuery" to false for VFUIblock. Well you can use my contact page to submit the code or mail me at my gmail account "avidev9"

      Delete
    2. Hi Scott , there is a newer version(1.22) of this plugin. With many bug fixes. You can try the same

      Delete
  3. I love this, makes my life a lot easier, do you have any suggestions on how to make this work with over 1k records? I have a few in the 1.5-3k range that would be great to use with something like this but I definitely can't think of a quick fix

    ReplyDelete
    Replies
    1. Peter, this component is targeted to make the experience with PageblockTable better and but it doesnt actually alter the governor limits associated with a PBT. Well talking about a custom component I can make a new component to show nearly 40K records on a page, but this has to be a custom standalone component and will depend lot more on your requirement and data that you are displaying.

      Delete
    2. Avi that sounds like something that we should potentially talk about. I have 2 objects right now that we had our original developer build controllers on for related lists. right now with the field set currently in use the viewstate maxes out at 600 records. would you like me to submit a project form above?

      Delete
    3. Yeah sure go ahead and submit one then we can discuss the same a bit in detail

      Delete
    4. Will do, might be a day or 2 need to finish a few other projects, btw, currently this does not sort by date correctly, it counts it as a string. any idea about how that could be solved?

      Delete
    5. found it at http://www.datatables.net/plug-ins/sorting

      Delete
    6. I am adding auto detect for date, numbers/currency . Will be there by today /tomorrow. Anyways thanks for reporting

      Delete
    7. Peter I just released a new version of the plugin with autodetection of datatype

      Delete
    8. Hi Avi, I am finally getting around to this upgrade but now I am using it for a dozen VF pages, any advice to a non SF wonk on how to upgrade without deleting everything?

      Delete
    9. I was able to get around this, sorry for wasting time on that, however i am still stumped by new date time sorting dilemmas I dont get it but "12/3/2013 8:05 AM" still cant sort correctly....

      Delete
    10. If you can hold for a day, I have new version coming up with bug fixes. I think you will need a bit of developer help, I will try to send you instructions

      Delete
  4. Thanks Avi, I will update the source after I move my custom stuff out of it

    ReplyDelete
  5. Hello Avi,

    Thanks for a wonderful component. I have tried in the component in firefox and Chrome, it works great. But it seems failing in IE 11. Getting a error as mentioned below

    SCRIPT5007: Unable to get property '_unload' of undefined or null reference
    File: ext.js, Line: 7, Column: 18230

    Can you provide me your valuable thoughts.

    ReplyDelete
    Replies
    1. Agghh IE 11! They have been always difficult to handle. I currently don't have a windows machine handy. I will try to borrow one soon and let you know about the same

      Delete
  6. How can i disable sorting for particular column of pageBlockTable?

    ReplyDelete
    Replies
    1. Currently it is not possible to do this in current version. Will be adding this support in subsequent releases.

      Delete
  7. Is there a parameter to tell what column to sort by?

    ReplyDelete
    Replies
    1. Currently it is not possible to do this in current version. I will adding this feature in next releases.
      By the way thanks for the review!

      Delete
    2. Is this still planned? I'm lazy and hate mucking around with the comparable interface in the controller in order to get my data to have a default sort.

      Delete
  8. Sorting on Currency fields not working ?

    ReplyDelete
    Replies
    1. Ok so I am not the only one this has happened to....and it is not working on my date field

      Delete
    2. Ok so I am not the only one this has happened to....and it is not working on my date field

      Delete
  9. Is it possible to include this component twice on a VF page? (for different tables)

    ReplyDelete
  10. Hi. Look like your plugin doesn't support more than 1000 records. Do you have solution for this in last release?

    ReplyDelete
    Replies
    1. Have a look at this post http://blogforce9.blogspot.in/2014/10/showing-more-than-1k-records-using-pbe.html

      Delete
    2. I am using this new table in a visual force page which shows opportunity records based on a criteria. I have an Action column with an Edit button. On the click of Edit button, a popup opens up with some fields for users to enter data and save the popup. My question is, the data is getting saved into the table but, I am unable to save the column sort order which was selected before the Edit the button was clicked. Please respond asap.

      Delete
  11. It is not sorting correctly for me as far as dates it sorts by number and when trying to sort my amount field it only sorts by number and not by the thousands place so I have 1,000; 12,000; 2,000; 23,000; 3,000. Please advice.

    ReplyDelete
  12. It is not sorting correctly for me as far as dates it sorts by number and when trying to sort my amount field it only sorts by number and not by the thousands place so I have 1,000; 12,000; 2,000; 23,000; 3,000. Please advice.

    ReplyDelete
  13. Facing issue in IE 11, can anyone help me out on this?

    ReplyDelete
  14. Hi,

    Functionality is great, it will be wonderful if it also shows PageNumber.

    Thanks,
    Dilip Singh

    ReplyDelete
  15. Hi there!

    I have a little question:

    could you
    - add integrated option like a "Select All/Deselect All"
    - add parameters for disabling - search. paging, ...

    Such additions will be very appreciated! :)

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete