Replace Paginator with More Results button

UI Components for JSF
Post Reply
smallya
Posts: 264
Joined: 19 Mar 2010, 19:22
Contact:

08 Jan 2013, 04:40

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: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

08 Jan 2013, 09:07

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

User avatar
andyba
Expert Member
Posts: 2473
Joined: 31 Mar 2011, 16:27
Location: Steinfeld, near Bremen/Osnabrück, DE
Contact:

08 Jan 2013, 13:12

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

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>
The controller bean

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);
    }
}
The lazy data model

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

smallya
Posts: 264
Joined: 19 Mar 2010, 19:22
Contact:

08 Jan 2013, 17:47

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: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

08 Jan 2013, 18:23

I agree that andies solution might work. I was completely thinking in the wrong direction due to another post about logiritmic paging. sorry.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 29 guests