I am looking to replace the Paginator with More button that appends next set of results to the current page i.e, scrollable result set like in websites like LinkedIn and other sites.
Has anyone has tried the same or has some suggestions? I am trying to eliminate the need to hit the server again. Here is what I am trying to do.
As part of the first query I bring in a large dataset (lazy loaded) and show a small set of that (first page) and when user hits More button - a p:commandbutton in the footer of datatable, I get the next set from the lazy loaded data set or expand the number of rows displayed. Not sure which one - but thought I will seek any expertise from PF experts in this forum.
Thanks in advance
Replace Paginator with More Results button
Netbeans 7.2| GlassFish 3.2 | PostgreSQL 9.1| MongoDB | Primefaces 3.4.2
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit
- andyba
- Expert Member
- Posts: 2473
- Joined: 31 Mar 2011, 16:27
- Location: Steinfeld, near Bremen/Osnabrück, DE
- Contact:
Actually it isn't that hard to do, at least to get something simple going.
XHTML snippet
The controller bean
The lazy data model
A couple of things
- does not account for results count (my model is infinitely long)
- does not scroll to the bottom of the data table (this is left to you to sort out)
XHTML snippet
Code: Select all
<h:form>
<p:panel header="More Data...">
<p:dataTable id="moreDataTable"
value="#{moreDataController.model}"
var="part"
rows="#{moreDataController.rows}"
paginator="false"
lazy="true"
scrollable="true"
scrollHeight="400">
<p:column headerText="Value">
<h:outputText value="#{part}"/>
</p:column>
<f:facet name="footer">
<p:commandButton value="More..." action="#{moreDataController.increaseRowCount()}" update="moreDataTable"/>
</f:facet>
</p:dataTable>
</p:panel>
</h:form>
Code: Select all
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package de.grimme.pf.pf341test.lazydata;
import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import javax.annotation.PostConstruct;
/**
*
* @author a.bailey
*/
@Named(value = "moreDataController")
@SessionScoped
public class MoreDataController implements Serializable {
private MoreDataLazyModel model;
private int rows;
/**
* Creates a new instance of MoreDataController
*/
public MoreDataController() {
}
@PostConstruct
public void init() {
model = new MoreDataLazyModel();
rows = 10;
model.setPageSize(rows);
}
/**
* @return the model
*/
public MoreDataLazyModel getModel() {
return model;
}
/**
* @param model the model to set
*/
public void setModel(MoreDataLazyModel model) {
this.model = model;
}
/**
* @return the rows
*/
public int getRows() {
return rows;
}
/**
* @param rows the rows to set
*/
public void setRows(int rows) {
this.rows = rows;
}
public void increaseRowCount() {
this.rows += 10;
model.setPageSize(rows);
}
}
Code: Select all
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package de.grimme.pf.pf341test.lazydata;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import org.primefaces.model.LazyDataModel;
import org.primefaces.model.SortOrder;
/**
*
* @author a.bailey
*/
public class MoreDataLazyModel extends LazyDataModel<String> implements Serializable {
/**
* Creates a new instance of MoreDataLazyModel
*/
public MoreDataLazyModel() {
}
@Override
public List<String> load(int first, int pageSize, String string, SortOrder so, Map<String, String> map) {
System.err.println(String.format("Load called with first=%d, pageSize=%d", first, pageSize));
List<String> res = new ArrayList<String>();
int max = first + pageSize;
for( int i=first; i < max; i++) {
res.add(String.valueOf(i));
}
this.setRowCount(res.size());
return res;
}
}
- does not account for results count (my model is infinitely long)
- does not scroll to the bottom of the data table (this is left to you to sort out)
PF 4.x (Elite versions), PF 5, Pf 5.1, PF 6.0
Glassfish 4.1, Mojarra 2.x, Java 8, Payara 4.1.1.
If you haven't read the forum rules read them now
Glassfish 4.1, Mojarra 2.x, Java 8, Payara 4.1.1.
If you haven't read the forum rules read them now
Thanks a lot andyba and Ronald.
I was almost leaning towards ui:repeat and jquery myself but andyba's solution seems feasible and workable for what I am doing. Let me give it a shot.
I was almost leaning towards ui:repeat and jquery myself but andyba's solution seems feasible and workable for what I am doing. Let me give it a shot.
Netbeans 7.2| GlassFish 3.2 | PostgreSQL 9.1| MongoDB | Primefaces 3.4.2
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit
-
- Information
-
Who is online
Users browsing this forum: No registered users and 57 guests