Replace Paginator with More Results button

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

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

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)

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 agree that andies solution might work. I was completely thinking in the wrong direction due to another post about logiritmic paging. sorry.