Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Sample for table with pagination when scroll down
I would like to develop a user interface in which the user can browse a large number of records in a table, but the page size can be configurable. I would like to use the lazy data loading feature, but the data will be fetch from the persistence layer as user scroll down the table. Is there any examples that I can reference to?
Thanks a lot. Clarence
Hi!
Using standard vaadin components you do not get this functionality. But you can write own component, by inheriting from Table and VScrollTable.
After in client side override method onScroll
@Override
public void onScroll(ScrollEvent event) {
super.onScroll(event);
if ((event.getRelativeElement().getScrollTop() + event.getRelativeElement().getClientHeight() + 10) >= event.getRelativeElement().getScrollHeight()) {
Scheduler.get().scheduleFinally(new Command() {
public void execute() {
client.updateVariable(paintableId, "needMoreData", true, true);
}
});
}
in server side override method changeVariables
@Override
public void changeVariables(Object source, Map<String, Object> variables) {
super.changeVariables(source, variables);
if (variables.containsKey("needMoreData")){
if (hasListeners(TableNeedMoreDataEvent.class)) {
fireEvent(new TableNeedMoreDataEvent(this));
}
}
}
here TableNeedMoreDataEvent and TableNeedMoreDataEvent is helpers:
public interface TableNeedMoreDataListener extends Serializable {
public void needMoreData(TableNeedMoreDataEvent event);
}
public class TableNeedDataEvent extends Component.Event {
private static final long serialVersionUID = 1168818909759341876L;
public static final Method METHOD;
static {
try {
METHOD = TableNeedMoreDataListener.class.getDeclaredMethod("needMoreData", new Class<?>[]{TableNeedMoreDataEvent.class});
} catch (final java.lang.NoSuchMethodException e) {
throw new java.lang.RuntimeException(e);
}
}
public TableNeedMoreDataEvent(Component source) {
super(source);
}
}
Usage(something like that):
private MyTableRealization table = new MyTableRealization();
table.addListener(new TableNeedMoreDataListener() {
private static final long serialVersionUID = -5632670680951930L;
@Override
public void needMoreData(TableNeedMoreDataEvent event) {
addMoreData();
}
});
If you are the difficulties, I can show you completely all implementation, but a bit later
It is possible to do this without having to modify/extend the Table, through the use of a "lazy loading" Container; I would suggest that this is a more "vaadin-like" approach to the problem.
Here's one example of an add-on that does this with SQL Queries.
http://vaadin.com/directory#addon/117
Cheers,
Charles.