Pagination in GWT

Question

Is pagination supported in GWT? Does GWT provide a GWT GUI element?

score 12 · Answer 1 · answered Oct 27 '11 at 13:02

If you need table pagination, you can try the GWT Widget called "CellTable". It is a customizable table which supports pagination easily.

You can find more info here (javadoc page) : http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/cellview/client/CellTable.html

And this is an example of how use it: http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable

score 6 · Answer 2 · edited Apr 13 '17 at 23:03

I have tried pagination with Celltable and it goes fine.

In your activity, you should do something similar to this:

CellTable table;

@Override
public void start(AcceptsOneWidget panel, EventBus eventBus) {
    // Get the table from the view
    view.setPresenter(this);
    panel.setWidget(view.asWidget());
    table=view.getCellTable();
    final SingleSelectionModel<Your_Class> selectionModel = new SingleSelectionModel<Your_Class>();
    table.setSelectionModel(selectionModel);
    selectionModel.addSelectionChangeHandler(
        new SelectionChangeEvent.Handler() {
            public void onSelectionChange(SelectionChangeEvent event) {
                Your_Class selected = selectionModel.getSelectedObject();
                if (selected != null) {
                    // Go to edit screen with selected.getId(); 
                }
            }
        });
}

Then in your implementation view create the columns:

table = new CellTable<Your_Class>();
table.setSelectionModel( new SingleSelectionModel<Your_Class>());

And finally put the pagination:

SimplePager pager;
SimplePager.Resources pagerResources = GWT.create(SimplePager.Resources.class);
pager = new SimplePager(TextLocation.CENTER, pagerResources, true, 0,true);
pager.setDisplay(table);

dataProvider.setList(list_of_data);
pager.setPageSize(number_you_want);

score 6 · Answer 3 · answered Oct 25 '11 at 23:17

As @caarlos0 mentioned, CellTable is a good start. You can also take a look of GWT SimplePager and AsyncDataProvider. Basically a SimplePager will be bind to a CellTable (or any Cell widget) and AsyncDataProvider. If there is a page change event fired (like user click next page), the onRangeChanged() will be called inside AsyncDataProvider, and you can customize the paging behavior in that function.

score 5 · Answer 4 · edited Feb 26 '16 at 16:03

5

You can extend AbstractPager if you want to have more control over the interface than SimplePager. Then you just need to override onRangeOrRowCountChanged(). You can also implement nice things like lazy loading. You can then paginate any widget that implements HasRows.

edited Feb 26 '16 at 16:03

Sevle

3,109
2
19
31

answered May 10 '12 at 23:54

Rebzie

310
1
3
9

score 5 · Answer 5 · answered Jan 05 '11 at 09:19

5

Suggestion is that use

Gwt-Ext or SmartGWT

which provides various components including local paging and remote paging, which can save your burning midnight oil.

answered Jan 05 '11 at 09:19

Ankit

2,753
1
19
26

2

I don't know about Gwt-Ext but SmartGWT is a horrible clutter. If you wish to destroy your site performance and have many confusing problems then SmartGWT is your library. – ZalewaPL Dec 20 '12 at 11:59

score 4 · Answer 6 · answered Sep 21 '11 at 10:55

you always can extend a component and add features by yourself, or, like @ankit says, use smartgwt.

remember, one of gwt advantages, is the possible to add features to default components, enjoy it.

[edit] another thing I remember now, take a look at this: http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable

score 4 · Answer 7 · answered Dec 02 '11 at 19:18

I would suggest using celltable. It is quite complicated at first sight. But, once you are used to it its powerful. CellTable for multiple columns CellList for single column Don't try CellTree is quite buggy.

CellTable sorting and column width info: http://code.google.com/intl/ca/webtoolkit/doc/latest/DevGuideUiCellTable.html

score 4 · Answer 8 · answered Dec 20 '11 at 09:21

4

yes.CellTable is really a good option for pagination.Once you get used to it.u will find it very user friendly.use simplePager for pagination.

answered Dec 20 '11 at 09:21

survi

152
1
5

score 4 · Answer 9 · answered Jan 16 '12 at 09:29

yes you have different different options like you use Cell Widgets of GWT , GWT-Ext , GXT for the pagination heir are some links for pagination

GWT : http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable

GXT : http://extjs.com/examples/#paging

score 3 · Answer 10 · answered Apr 05 '12 at 08:07

3

yes. CellTable and Pager is what you want.

https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCellWidgets#Selection_Data_Paging

answered Apr 05 '12 at 08:07

Denis Wang

31
3

score 2 · Answer 11 · answered Nov 08 '11 at 07:10

I would suggest using something like Ext-GWT. It provides built in mechanisms for handling paging. You can have a grid view that supports Local Pagination (all the data is collected in one call but split into different pages) or Remote Pagination(data call is made each time a new page is loaded)

score 1 · Answer 12 · answered Oct 27 '16 at 10:49

Q1 Is pagination supported in GWT?

Yes

Q2 Does GWT provide a GWT GUI element?

Yes

Details -

Paging is the operation of loading and bringing into view a range of data that is not currently loaded. Q1 - Client side pagination is fully supported by GWT via SimplePager and AbstractPager classes. If you are looking for remote pagination then you'll have to create your own custom widgets and logic as per your requirement.

Example :

public class SimplePagerExample implements EntryPoint {

    public void onModuleLoad() {
// Create a CellList.
CellList<String> cellList = new CellList<String>(new TextCell());

// Add a cellList to a data provider.
ListDataProvider<String> dataProvider = new ListDataProvider<String>();
List<String> data = dataProvider.getList();
for (int i = 0; i < 200; i++) {
  data.add("Item " + i);
}
dataProvider.addDataDisplay(cellList);

// Create a SimplePager.
SimplePager pager = new SimplePager();

// Set the cellList as the display.
pager.setDisplay(cellList);

// Add the pager and list to the page.
VerticalPanel vPanel = new VerticalPanel();
vPanel.add(pager);
vPanel.add(cellList);
RootPanel.get().add(vPanel);
      }
    }

` Q2 SimplePager contains the buttons and text label that you can customize as per your requirement. For reference check this link http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCellTable

UI of simple pager

score 0 · Answer 13 · answered May 27 '15 at 17:09

0

I know the question is quite old but this as not been mentioned yet. You can use a ListDataProvider to handle client side paging. It is very easy to use and will save you alot of time.

answered May 27 '15 at 17:09

rndlaine

103
1
7

score 0 · Answer 14 · answered Jun 08 '15 at 21:37

Classic start/length pagination is fully supported by GWT cell widgets. Just create a SimplePager and hook the RangeChangeEvent. Your trouble will be on the server, especially with modern NoSQL databases. While most of them support "start" and "limit" query modifiers in the same manner JPA/Hibernate does, "start" is highly discouraged, because it can only work by iterating over unneeded data.

Consider continuos blog-syle "scrolling" pagination or "Prev/Next" only. Then you can implement it via sorting the result set and specifying "lee than" or "greater" conditions - together with "limit".

score 0 · Answer 15 · answered May 05 '16 at 10:37

package com.ravi.gwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.ravi.gwt.client.ContactDatabase.ContactInfo;
import com.ravi.gwt.client.ui.MyPaginationDataGrid;
public class GWT11 implements EntryPoint {

    public void onModuleLoad() {
        MyPaginationDataGrid<ContactInfo> grid = new MyPaginationDataGrid<ContactInfo>();
        grid.setHeight("500px");`enter code here`
        grid.setDataList(ContactDatabase.get().generateContacts(100));
        RootPanel.get().add(grid);
    }
}

Pagination in GWT

15 Answers15