primefaces datatable select all with paginator

Question

I have a p:datatable with multiple selection mode and a paginator.

<p:datatable value=#{rows} selection=#{selectedRows} pagintor="true" rows="20" rowsPerPageTemplate="10,20,50,100" paginatorPosition="bottom">
  <p:column selectionMode="multiple"/>
  <p:ajax event="toggleSelect"/>
  ... columns ...
</p:datatable>

When i click the header checkbox all rows are selected. When i click on the header checkbox to select all rows and then want to export the selected rows (by using the values of 'selection'), it only returns 20 objects. I expect that when i use the header checkbox it selects all rows of the datatable, and not only the one of the page. I have a datatable with more then 200 pages, so you can imagine it is a very tedious job to export all of the when using a paginator ;).

I suppose it is a bug I should log, or am I missing something? I looked through the documentation but it says nothing about using multiple selection mode together with pagination... Thanks for your feedback!

Answer 1

I had the exact same requirement - select all rows across pages.

What I did - provided an <p:inputSwitch /> to toggle all rows across all the pages.

Copied and is as below -

<p:dataTable id="id" var="var" widgetVar="wvar" rowsPerPageTemplate="7,15" reflow="true"
    value="#{backingBean.dataModel}" paginator="true" rows="7" rowIndexVar="index" rowKey="#{var.id}"
    paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
    selection="#{backingBean.selectedItems}">
<c:facet name="header"...
<p:inputSwitch value="#{backingBean.allRecords}" onLabel="All" offLabel="None" >
    <p:ajax onstart="if (PF('wvar').getSelectedRowsCount() == 0) PF('wvar').selectAllRows(); else PF('wvar').unselectAllRows();" />
</p:inputSwitch>

private boolean allRecords;//Getter++Setter++

And, defined toggleSelect event as below -

<p:ajax event="toggleSelect" onstart="if (PF('wvar').getSelectedRowsCount() == 7 || PF('wvar').getSelectedRowsCount() == 15) PF('wvar').selectAllRows(); else PF('wvar').unselectAllRows();" />

where 7 and 15 comes from the datatable rowsPerPageTemplate="7,15".

Works for me.(PrimeFaces 5.3)

Answer 2

I expect that when i use the header checkbox it selects all rows of the datatable, and not only the one of the page.

This is a wrong expectation.

I suppose it is a bug I should log,

Nope.

or am I missing something?

No, it is by design. So other than having the wrong expectation you did not miss anything. The fact that you are the first one in SO to ask this and the second one if you count the number of requests in the PrimeFaces forum to is an indication of this.

Not even GMail does this btw. They give you the option to select all message on the page you are on, and when you do this they give you an additional option to select all messages across all pages

Answer 3

Sample Code:-

**JAVA (your backing bean class)
==============================**
//Stores the checked items from data table.
private List<String> selectedIds = new ArrayList<>();

private List<String> getSomeList() {
// return list of strings to data table
  return someList;
}

public void selectAllCheckboxes(ToggleSelectEvent event) {
if (selectedIds != null)  {
    selectedIds.clear();
    if (event.isSelected()) {
        selectedIds.addAll(someList); //Add all the elements from getSomeList()
    }
 }
}

**XHTML
=====**

<p:dataTable id="data-table-id" value="#{backingBean.someList}"
selection="#{backingBean.selectedIds}" rowKey="#{id}" var="id"                   
paginator="true" rows="10" paginatorPosition="bottom"
paginatorAlwaysVisible="false" rowSelectMode="checkbox"
rowsPerPageTemplate="10,20,30,50">

<p:column selectionMode="multiple" />
<p:ajax event="toggleSelect" 
update="@this"listener="#backingBean.selectAllCheckboxes}"/>

</p:dataTable>

Answer 4

FOR JSF 2 ,for selected all rows on datatable in selectionMode multiple with paginator=true: In Page

<p:dataTable widgetVar="tableArea" yourtags...>
     <p:ajax  event="toggleSelect" oncomplete="teste()" /> /// toggleSelect is dispared on click to checkbox header
     <p:column id="columnId" selectionMode="multiple"/>

In js:

function teste(){
		
	var checked = $(document).find(":checkbox")["0"].checked; ///Find checkbox header and verify if checkbox is checked
	if(checked == true){
		PF('tableArea').selectAllRows(); // if true, selectAllRows from datatable
	} else {
		PF('tableArea').unselectAllRows(); //
	}		
}