PageBlockTable Enhancer v2.2 - The much needed update!



Well here is a much awaited and the needed update for the PageBlockTable Enhancer plugin. Ever since I coded the first version, there were request for many features and this 2.2 version brings down some of them.

Here is what is new with this plugin
  1. Parameter to turn on and off Pagination.
  2. Support for specifying available page sizes.
  3. Support for choosing default page size on page load.

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 "initPageBlockTableEnhancer()" method from "oncomplete" even of your commandButtons/actionFunctions/actionSupport/commandLink .

    <apex:commandButton value="Rerender" reRender="mid" oncomplete="initPageBlockTableEnhancer()"/>
Basic Syntax
The basic syntax remains same, just few added params.

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


Demo And Installation / Unmanaged Package: http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rdwd
[Updated @ 27-Nov-2013 :  Bug Fixes related to sorting]

41 comments:

  1. Any way to set a default sort column?

    ReplyDelete
    Replies
    1. Will sorry its currently not supported. But what you can do is change the underlying query in controller and populate the table using the ordered/sorted query

      Delete
  2. Looks like the Sorting and pagination are not working if the sidebar parameter is set to true ("Sidebar=true").

    ReplyDelete
    Replies
    1. Thanks for reporting. I tired setting sidebar = true and ran the plugin, but it worked for me.
      Can you share your code ?

      Delete
  3. Also if there are 3 or more pageblock tables in the pages , then by default the pagination is only shown on two page blocks.

    ReplyDelete
    Replies
    1. Well tested this as well and seems like its working for 3 and more.

      Delete
  4. The initPageBlockTableEnhancer() is creating duplicate pagination bars, if there are only few tables (say 2 out of 3 available) rerendered as part of the rerender then it is just duplicating the pagination controls.

    ReplyDelete
  5. Hey Dev, could you please provide me your email address so that I can send my code. Also the initPageBlockTableEnhancer() is creating duplicate pagination controls, did you happen to try that ?

    ReplyDelete
    Replies
    1. Really sorry for the delayed response. The bug you reported is attended in the new version. Links to the package in this post is updated to the latest one. Try the newer if you are still facing issues

      Delete
  6. Hello Dev,

    I installed the version 2.22 in sandbox Jquery plugin is not working in IE9.I have version 2.21 in my developer account
    functionality is working fine IE.do we need to add any code for version 2.22 to work in IE.

    ReplyDelete
    Replies
    1. I can't comment now. Well looking at the code now ,I may have to borrow a windows machine to test this one.

      Delete
    2. Does the demo works for you ?
      http://blogforce9dev-developer-edition.ap1.force.com/PageBlockTableEnhancerDemo

      Delete
    3. Demo is not working on IE it works in Chrome

      Delete
    4. I just had a look on the demo using IE9 it seems its working there. I will investigate further on the same. Can you please check the console and report any error that appears ?

      Delete
    5. This comment has been removed by the author.

      Delete
    6. When I enable the F12 developer tools in IE from settings to check console the pagination and sorting are showing up on page

      Delete
    7. Just updated the package to support IE (https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000MbZI)

      Delete
  7. I just installed this to test it out. It looks cool but still needs some work. When I installed it I get the following message in the chrome javascript console:
    "Object [object Object] has no method 'tablesorter'"

    I see the pagination links, but none of the js seem to work. My page is a standard visualforce page with an section at the top and then one custom and which I am trying to sort/paginate.

    Also, in your demo it sorts account numbers in numbers, blanks, then letters. Shouldn't blank values come first? Would be nice to have a nulls first, nulls last option for sorting too.

    ReplyDelete
    Replies
    1. The second line was supposed to read:
      My page is a standard visualforce page with an apex detail section at the top and then one custom apex pageblock and apex pageblocktable which I am trying to sort/paginate.

      Delete
    2. Hi Paul does the demo page that is included works for you ?

      Delete
    3. Paul just wanted to tell you I have fixed the bug related to null values and will be posting the same soon. You can check demo meanwhile.

      Delete
  8. WOW, I always amazed what people put out there, just sharing. THANK YOU!!!!

    One question, I am confused about where to call initPageBlockTableEnhancer(). Here is my scenarion ...
    - I have a pageBlockTable that gets filtered by input field criteria
    - input fields have onkeyup event to a javascript
    - javascript calls apex:actionFunction
    - apex:actionFunction runs query, returns null after

    Adding the button works but it requires user intervention, where in my flow do I automatically call the initPageBlockTableEnhancer() function?

    Thanks for any thoughts,

    Robert

    ReplyDelete
    Replies
    1. Well thanks but I guess you will find lots of examples and codes samples @internet.

      So if you rerendering your pageblock table using actionfunction , just add "initPageBlockTableEnhancer()" in oncomplete of your actionFunction. Something like <apex:actionFunction name="myFunc" oncomplete="initPageBlockTableEnhancer()"

      Delete
  9. I'm using the 2.2.1 code, the latest link is not 2.2.2. I'm getting multiple page navigation panels in the one pageblocktable I have on my page.

    Also, when using the PageBlockTableEnhancer and the Blocking Full Page or Element Blocking at the same time breaks the blocking code.

    ReplyDelete
    Replies
    1. Scott they all are built on different version of jQuery since and I guess I need to adjust them and make them and bring them to a same version.
      I will be publishing a new version of the plugin very soon(today or tomorrow) you can try that. Mean while can you share your code ?

      Delete
    2. Please try the latest version (https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000MTzM) without the Element Blocking and let me know if that works for you.

      Delete
    3. Been out on vacation, I will tryout the latest version and let you know...Thanks.

      Delete
    4. I tried with the latest link which once installed and checked in SF.com it says 2.21. Once I re-render the pageblocktable after I've searched and populated the table I get the duplicate navigation panel. Everytime I re-render the table (because of a query search) I get a new navigation panel. Is there a trick when re-rendering the table that I need to set or unset?

      I'll be glad to email the VF code, can I have an email address?

      Delete
  10. Avidev9 - this is pretty cool. I'm running 2.25 and noticed two minor bits:

    1. defaultPageSize is a required attribute because, if unspecified, and you use simply: you will get a jQuery compiler error on this line: $j(this).find('option[value="'+{!defaultPageSize}+'"]').attr('selected','selected');
    2. You should note in the doc that it will not sort pageBlockTable columns that are inputFields - my use case was a sortable pageblocktable for mass edits of picklist values. I realize that sorting inputfields is hard as they could be dates, multi-select picklists, numbers, checkboxes, etc but something to think about.

    Overall - very very impressive - packaging as a component is perfect

    ReplyDelete
    Replies
    1. aack - ate my markup, should read ...and you use simply c:PageBlockTableEnhancer targetPbTableIds="aTable" paginate="false" you will get ajQuery compiler error ....

      Delete
  11. Hey there,

    I recognise your name from the forums, you have helped me in the past with some development issues.

    I recently installed your program and I believe that you have done very well. It works as expected and you should be proud of yourself. I just had a few questions I was hoping you would answer.

    1. Is it possible for me to change the colours in anyway, this is not a big one as the current colours are fine, this is more out of curiosity.
    2. Before implementing the pageblocktableenhancer, I was playing around with adding extra functionality to my pageBlock table. One of which was highlighting a section of a pageblocktable upon its rendering of an output below it and then keeping that section highlighted until another commandlink is clicked and then has rendered the output panel(Code below). My question is, is it possible to add this function to the visualforce component so that it can be summoned in the easy and simple way that the pageblocktableenhancerADV can be.









    {!OffCom.Name}






















    $j = jQuery.noConflict();
    function highlightElem(elem){
    $j(elem).parent().parent().parent().find('tr').removeClass('ui-state-highlight');
    $j(elem).parent().parent().addClass('ui-state-highlight');
    }

    3. I came across this package whilst searching for a way in which to fix headers and columns whilst scrolling, everything I tried failed and your pageblocktableenhancer was the closest I came to compacting the records, so thankyou. But will you ever implement something along the lines of fixed headers in the future?
    4. I noticed that the exporting feature randomly stopped working. When I was first testing the enhancer, it was working well. But then this morning upon testing, the feature only worked for the print button, I was wondering if there is a simple way to fix this bug?
    5. Finally, all the features of the PbtEADV are great, but sometimes some features are called for when others aren't, I was wondering if there was anyway to turn off certain features, I know that exporting can be turned on and off, but what of the rest.

    Thank you so much for this package Avi, you have helped me greatly. I hope all is well and to hear from you soon.

    Kind regards,

    Michael Lomas

    ReplyDelete
    Replies
    1. It would appear that my VF code could not be posted... basically, the script is called on the commandlink level with oncomplete="highlightElem(this);"

      and the files:






      Delete
  12. The sorting function is not working correctly for me is there a way that I can fix this? It is sorting only by number and not by thousands place. Thanks!

    ReplyDelete
  13. The sorting function is not working correctly for me is there a way that I can fix this? It is sorting only by number and not by thousands place. Thanks!

    ReplyDelete
  14. The sorting function is not working correctly for me is there a way that I can fix this? It is sorting only by number and not by thousands place.Any update or fix for this. It is getting very difficult for my currency fields to get sorted properly based on the combined value.

    ReplyDelete
  15. Hi,

    Thank you so much for that great post regarding page block table enhancement.

    But i found basically two issues as follows:

    1. )if we use that page block table enhancement on page block table that contains inline edit in columns then only on first page inline edit support will work
    and if i go to second page the inline edit will not worked.

    2.) I added a select check box for selecting rows of table but when i selected a checkbox on 1st page and then select 1 record on 2 or 3 page then in controller
    i will get only selected value of check box on currenlty visible page.. So in class its sending selected value of current visible page only.


    Thanks,
    Rajendra

    ReplyDelete
  16. Is there anyway to disable the sort for a given column? I have an input checkbox for a header (e.g. select all), and I don't want it to attempt to sort when clicked.

    ReplyDelete
  17. Hi,

    I have a custom pick list field used as a filter. Based on the filter value, opportunity records will be displayed in a page block table. I used PageblocktableenhancerADV to have the column sorting and search feature.

    Rerender doesn't work when i eliminate the None value from the Pick list field.

    Please help.

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

    ReplyDelete
  19. Hi, Can this be implemented on an HTML table instead of an pageBlockTable?

    ReplyDelete