Board index JavaServer Faces General Replace Paginator with More Results button

Replace Paginator with More Results button

Components, Ajax Framework, Utilities and More.


Posts: 264

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
Netbeans 7.2| GlassFish 3.2 | PostgreSQL 9.1| MongoDB | Primefaces 3.4.2
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit

kukeltje Expert Member

Posts: 6266
Location: Netherlands
difficult... needs lots of internal changes to tge datatable. but why use a datatable at all? a ui repeat with some jquery might do the trick
Ronald van Kuijk
______________________________
PrimeFaces 4.0, PrimeFaces plus 0.0.2 | Jboss 7.2.0 | Mojarra 2.1.18
Fedora 19, Firefox 26.0
Read the forum posting rules
Beginners: http://www.coreservlets.com/JSF-Tutorial/jsf2/

andyba User avatar
Expert Member

Posts: 2084
Location: Steinfeld, near Bremen/Osnabrück, DE

Actually it isn't that hard to do, at least to get something simple going.

XHTML snippet

            <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>


The controller bean

/*
 * 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);
    }
}


The lazy data model

/*
 * 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;
    }
}


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)
PF 3.4.2, PF 3.5.10, PF 4.x (Elite versions)
Glassfish 3.1.2.2, Mojarra 2.x, under both Java 6 and Java 7.
If you haven't read the forum rules read them now
My blog: http://onthefaceofthings.blogspot.de/
PrimeFaces Project


Posts: 264

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.
Netbeans 7.2| GlassFish 3.2 | PostgreSQL 9.1| MongoDB | Primefaces 3.4.2
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit

kukeltje Expert Member

Posts: 6266
Location: Netherlands
I agree that andies solution might work. I was completely thinking in the wrong direction due to another post about logiritmic paging. sorry.
Ronald van Kuijk
______________________________
PrimeFaces 4.0, PrimeFaces plus 0.0.2 | Jboss 7.2.0 | Mojarra 2.1.18
Fedora 19, Firefox 26.0
Read the forum posting rules
Beginners: http://www.coreservlets.com/JSF-Tutorial/jsf2/


Return to General