How to display more than 5000 records in pageblock table with out pagination..?

Question

On my Visualforce page I've to display more than 5000 records with checkboxes like the following :

Here I'm getting 6781 records, but on my vf page it was displaying 100 records only. If I use PAGINATION then I've to select the records which is belongs to that page only. As per my requirement user can select any of the 6781 accounts at a time. Is there any possible way to display all the records in same vf page with side bar.

Answer 1

You can see a deeper discussion here: Maximum number of collection items that can be iterated in an iteration component limit in salesforce

The basic idea is that a Map allows you to iterate basically as many components as you want. View state is still an issue, and I think the requirement to view so many records is completely ridiculous. But it is technically feasible.

In your controller, us a Map<Id, SObject>, or Map<Id, SomeWrapper>, as you like:

public Map<Id, Wrapper> wrappers { get; private set; }

Then on your page you should be able to loop over all of the records:

<apex:pageBlockTable value="{!wrappers}" var="wrapper">
    <apex:column>
        <apex:inputCheckbox value="{!wrapper.isSelected}" />
    </apex:column>
    <apex:column value="{!wrapper.record.SomeField__c}" />
</apex:pageBlockTable>

You'll lose the ability to control order if you take this approach.

Answer 2

I had a requirement once to load and display thousands of rows to the user without pagination in a Visualforce Page. I also had to have a checkbox for each row and the "select all" functionality, exactly like you. It was a crazy requirement, but I managed to give them what they wanted in the end.

The way I resolved this was by incorporating AngularJS into the VF page and utilizing a directive called infinite-scroll that you can find here.

I would load all row data into JavaScript variable so that I could bind the Angular controller to it. The page would initially render only 200 rows, I believe, and then, whenever the user would scroll down the page the infinite-scroll directive would load another 20 rows, so the user wouldn't even notice that not all rows were loaded at once.

Of course, the page contained a filter functionality at the top (also using Angular), so users were able to filter out the rows, and not scroll down into the abyss to find the desired row.

Also, the select all checkbox was bound to a function that would iterate through all the rows in the model and change the isSelect field to true or false.

That's the way I solved this, I hope this will give you some ideas.