PrimeFaces dataTable: how to catch an event on every page?

Question

I created a PrimeFaces statistics table:

<p:dataTable id="locationTable" value="#{bean.object}" var="item" paginator="true" rows="10" paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink}{LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="5,10,15,20,30,50,100"> ... </p:dataTable> 

I would like to keep the dropdown value for the lines on the page. When the user changes the value, how do I catch the event? Therefore, I can read and save one of the values ​​"5,10,15,20,30,50,100" so that it automatically works the next time the user returns to this page. Currently, it is not saved, so every time the page loads, the default value of "10" is returned.

Answer 1

You can do it like this:

View

 <h:form id="mainForm"> <p:dataTable id="locationTable" value="#{datatableBean.list}" var="item" paginator="true" widgetVar="dtVar" rows="#{datatableBean.rows}" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="1,2,3,4,5,6"> <p:column> #{item.name} </p:column> </p:dataTable> <p:remoteCommand name="persistRows" action="#{datatableBean.saveRows}" process="@this" update="rows" global="false" /> <h:outputText id="rows" value="#{datatableBean.rows}" /> <script> jQuery(document).ready(function() { dtVar.paginator.rppSelect.change(function() { persistRows([{name: 'rows', value: this.value}]); }); }); </script> </h:form> 

Bean

 import java.io.Serializable; import java.util.ArrayList; import java.util.List; import java.util.Map; import javax.annotation.PostConstruct; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class DatatableBean implements Serializable { private int rows; private List<SimpleBean> list; @PostConstruct public void setup() { //default rows value rows = 2; list = new ArrayList<SimpleBean>(); //ID and Name list.add(new SimpleBean(11, "A")); list.add(new SimpleBean(22, "B")); list.add(new SimpleBean(33, "C")); } public void saveRows(){ FacesContext context = FacesContext.getCurrentInstance(); Map map = context.getExternalContext().getRequestParameterMap(); String rowsStr = (String) map.get("rows"); rows = Integer.parseInt(rowsStr); } public int getRows() { return rows; } public void setRows(int rows) { this.rows = rows; } public List<SimpleBean> getList() { return list; } public void setList(List<SimpleBean> list) { this.list = list; } } 

The strategy here is to extend the onchange event associated with the html select tags displayed with paginator. To make this easier, I set wigetVar to datatable ( dtVar ), knowing that the clientide api gives us both choices through dtVar.paginator.rppSelect .

Now, in order to be able to send a value for those selected for the managed bean, we can use remoteCommand. Using the remoteCommand component, we can send javascript parameters to the managed one. I called remoteCommand as persistRows , and by calling it, I specified additional parameters using the template required by the component: [{name: 'rows', value: this.value}] ([{name: 'nameOfTheVariable ", value:' valueOfTheVariable '}]).

Now you can do whatever you want with this rows attribute.

Answer 2

I sent this solution to another question, and I share it because I hope that someone can find it easier than Daniel (who still taught me a lot of jQuery!)

My solution uses Primefaces 5.2.x.

I found a fairly simple way to implement this, one of the problems I had was that when I called the onPaginate () method, it did not have the newest value selected.

So, here is what I did to make sure you always had the last value, and can save / load it into a database or a cookie or something like that (we save a cookie).

 <p:dataTable ..... paginator="true" paginatorPosition="bottom" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" currentPageReportTemplate="Total records: {totalRecords}, showing page {currentPage} of {totalPages}" rowsPerPageTemplate="25,50,100" rows="#{controller.rowsPerPage}" ..... > ..... <p:ajax event="page" oncomplete="rowsPerPageUpdate()" /> ..... </p:dataTable> <p:remoteCommand name="rowsPerPageUpdate" actionListener="#{controller.onPaginate}" /> 

and then our controller looks like this:

 @Dependent @Named public class TableController implements Serializable { private String rowsPerPage = "25"; //default value ..... public void onPaginate() { //save to the cookie } ..... } 

Mostly the magic happens in remoteCommand, which will fire after an ajax event to ensure that the .rowsPerPage controller updates correctly.

Answer 3

I was also looking for a solution, and after reading this topic, I found that a new Primefaces function has appeared that allows you to save the state of the data table.

So for Primefaces v6.0. 10+ you can just add multiViewState="true" .

Note that this will also save the filter, sorting, current page and selection next to the lines on the page.

Here is a link to the official demo of this feature: https://www.primefaces.org/showcase/ui/data/datatable/tableState.xhtml

Answer 4

A simpler way than what is written above (tested with Primefaces 7.X) is to simply use the access method. The advantage of this solution is that it has the actual number of rows to install. Otherwise, in my case, I will get the previous line number before it is changed ...

 <p:dataTable ..... paginator="true" paginatorPosition="bottom" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" currentPageReportTemplate="Total records: {totalRecords}, showing page {currentPage} of {totalPages}" rowsPerPageTemplate="25,50,100" rows="#{controller.rowsPerPage}" ..... > ..... ..... </p:dataTable> 

And the bob should just look like this:

 @ViewScoped @Named public class Controller implements Serializable { private int rowsPerPage = 25; //default value public int getRowsPerPage() { return rowsPerPage; } /** Will be called each time the number or selected rows change */ public void setRowsPerPage(int rows){ this.rowsPerPage = rows; // Do some other stuff, like using a cache to store the value } } 

I personally use the cache, which stores the number of lines per user and object types.