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.