I am currently introducing a mobile friendly version of our web-application.
In a first step I transformed a rich:dataTable with a lot of columns into a rich:dataList containing only a few columns as values.
The old table used pagination and I want to reuse this existing mechanism to some extend in the new list. In the new list, however, I don’t want to paginate but append! So when I click on a “Load More” button, I want to append the new elements to the already existing ones.
However appending should not happen on the server side, but on the client side. Because the normal mechanism is to append elements on the backing bean’s list on “Load More” and then trigger some reRendering (e.g. via ). The result of this, is that the old data is fetched from the server again, which I don’t want. I just want the new data, which is the next pagination, to be appended to the already existing ones.
Does someone has an idea, how I can realize that?
(limiting factors: JSF 1.X and Richfaces 3.X [in combination with jQuery mobile])
An list pagination example (it’s primefaces, cause I couldn’t find a richface example): http://www.primefaces.org/showcase/ui/dataListAjax.jsf And something like this I want to transform into an infinite list with a “Load More” button.
Would really appreciate your help and/or ideas about that!
Thanks in advance!
Just in case somebody else is interested in this…
I found a solution or rather a workaround:
I introduced another rich:dataList, that gets rerendered every time I click on “Load More”.
The “Load More” button is a “a4j:commandButton” and its action triggers pagination. Finally I use its oncomplete-attribute to call a JavaScript function, that moves the next pagination (temporary list) to my main list via jQuery DOM manipulation.
It works just fine