'load filtered values in p:dataTable while the page is loading
How to load filtered values in the data table while the page is loading? I have 3 data tables in a single page.
Tried adding filterValue="BMW" in
<p:column
headerText="Car Type"
sortBy="#{car}"
filterBy="#{car}"
filterValue="BMW" id="carTypeColumn">
<h:outputText id="car"
value="#{carResultsRow.car.type}" />
</p:column>
<p:dataTable id="carResults"
value="#{carMB.car}" var="carResultsRow"
rows="20" paginator="true" widgetVar="carResultsVar"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}
{PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
style="margin-bottom:20px" rowIndexVar="rowIndex"
lazy="true" sortOrder="DESCENDING"
currentPageReportTemplate="(Displaying {startRecord} - {endRecord} of
{totalRecords})"
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}"
emptyMessage="No results found for search."
reflow="true">
<p:column
headerText="Car Type"
sortBy="#{car}"
filterBy="#{car}" id="carTypeColumn">
<h:outputText id="car"
value="#{carResultsRow.car.type}" />
</p:column>
<p:dataTable id="carResults2"
value="#{carMB.car}" var="carResultsRow"
rows="20" paginator="true" widgetVar="carResultsVar"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}
{PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
style="margin-bottom:20px" rowIndexVar="rowIndex"
lazy="true" sortOrder="DESCENDING"
currentPageReportTemplate="(Displaying {startRecord} - {endRecord} of
{totalRecords})"
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}"
emptyMessage="No results found for search."
reflow="true">
<p:column
headerText="Car Type"
sortBy="#{car}"
filterBy="#{car}" id="carTypeColumn">
<h:outputText id="car"
value="#{carResultsRow.car.type}" />
</p:column>
<p:dataTable id="carResults3"
value="#{carMB.car}" var="carResultsRow"
rows="20" paginator="true" widgetVar="carResultsVar"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}
{PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
style="margin-bottom:20px" rowIndexVar="rowIndex"
lazy="true" sortOrder="DESCENDING"
currentPageReportTemplate="(Displaying {startRecord} - {endRecord} of
{totalRecords})"
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}"
emptyMessage="No results found for search."
reflow="true">
<p:column
headerText="Car Type"
sortBy="#{car}"
filterBy="#{car}" id="carTypeColumn">
<h:outputText id="car"
value="#{carResultsRow.car.type}" />
</p:column>
The following data table produces the result-
Actual Results
Data Table 1
ID Year Type Color Status Price
adff7ca0 1974 BMW Blue Sale $14,160.00
50f83d04 1998 Renault Silver Sale $43,645.00
27b7be8d 1995 Merc Red Sold $80,627.00
b35c4322 2006 BMW Orange Sold $16,051.00
7888e692 1997 Fiat Red Sale $4,508.00
adbf1199 2004 Audi Brown Sale $37,511.00
8eb3e5a9 1985 Honda Black Sold $46,729.00
fed0821c 1990 BMW Red Sale $88,185.00
85d2282f 1967 Honda Orange Sold $33,674.00
bc34ed49 1972 BMW Blue Sale $81,567.00
Data Table 2
ID Year Type Color Status Price
adff7ca0 1974 BMW Blue Sale $14,160.00
50f83d04 1998 Renault Silver Sale $43,645.00
27b7be8d 1995 Merc Red Sold $80,627.00
b35c4322 2006 BMW Orange Sold $16,051.00
7888e692 1997 Fiat Red Sale $4,508.00
adbf1199 2004 Audi Brown Sale $37,511.00
8eb3e5a9 1985 Honda Black Sold $46,729.00
fed0821c 1990 BMW Red Sale $88,185.00
85d2282f 1967 Honda Orange Sold $33,674.00
bc34ed49 1972 BMW Blue Sale $81,567.00
Data Table 3
ID Year Type Color Status Price
adff7ca0 1974 BMW Blue Sale $14,160.00
50f83d04 1998 Renault Silver Sale $43,645.00
27b7be8d 1995 Merc Red Sold $80,627.00
b35c4322 2006 BMW Orange Sold $16,051.00
7888e692 1997 Fiat Red Sale $4,508.00
adbf1199 2004 Audi Brown Sale $37,511.00
8eb3e5a9 1985 Honda Black Sold $46,729.00
fed0821c 1990 BMW Red Sale $88,185.00
85d2282f 1967 Honda Orange Sold $33,674.00
bc34ed49 1972 BMW Blue Sale $81,567.00
Expected Results
Here in the expected results data tables were filtered by the type of car, First data table was filtered by the type BMW and contains the type BMW, Second data table was filtered by the type Honda and contains the values of Honda, The third data table contains the type of both Renault and Merc.
Datatable 1
ID Year Type Color Status Price
adff7ca0 1974 BMW Blue Sale $14,160.00
b35c4322 2006 BMW Orange Sold $16,051.00
fed0821c 1990 BMW Red Sale $88,185.00
bc34ed49 1972 BMW Blue Sale $81,567.00
Datatable 2
ID Year Type Color Status Price
85d2282f 1967 Honda Orange Sold $33,674.00
8eb3e5a9 1985 Honda Black Sold $46,729.00
Datatable 3
ID Year Type Color Status Price
50f83d04 1998 Renault Silver Sale $43,645.00
27b7be8d 1995 Merc Red Sold $80,627.00
===============================
Result With the solution posted
filterBy="#{carMB.filterBy}" filterBy = singletonList(new FilterState(
ID Year Type Color Status Price
BMW -------------- Appeared in the filter header
dff7ca0 1974 BMW Blue Sale $14,160
f83d04 1998 Renault Silver Sale $43,640
7be8d 1995 Merc Red Sold $80,627
5c4322 2006 BMW Orange Sold $16,051
88e692 1997 Fiat Red Sale $4,508
bf1199 2004 Audi Brown Sale $37,511
3e5a9 1985 Honda Black Sold $46,729
0821c 1990 BMW Red Sale $88,185
2282f 1967 Honda Orange Sold $33,674
4ed49 1972 BMW Blue Sale $81,567
Solution 1:[1]
Assuming your filter works at all when you manually input text, it is still true that the filterValue attribute of p:column does not seeme to trigger actual data filtering. Instead it only populates the filter input with the bound value. (Not sure if this is intentional)
In order to actually apply a default filtering, you'll have to populate a java.util.List with one or more org.primefaces.component.datatable.FilterState instances:
package my.pkg;
import static java.util.Collections.singletonList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
import org.primefaces.component.datatable.FilterState;
@Named
@RequestScoped
public class MyBean {
private List<FilterState> filterBy;
@PostConstruct
public void init() {
filterBy = singletonList(new FilterState("frm1:carResults:column1", "BMW"));
}
// getters / setters
}
Then bind this list to p:dataTable#filterBy attribute:
<h:form id="frm1">
<p:dataTable id="carResults" filterBy="#{myBean.filterBy}" ...>
<p:column id="column1" ...>
...
</p:column>
</p:dataTable>
</h:form>
Note that columns are identified by their xhtml element IDs.
As of PrimeFaces 8.0 FilterState is now named FilterMeta.
Solution 2:[2]
In addition to the above answer the following might be helpful:
This fires off an additional asynchronous call to the backend to the lazy loading component to filter the items, but since the page has not loaded properly yet, I needed to use the setTimeout to call after the page has loaded and created the PF object
<h:outputScript target="head">
$(function() {
setTimeout(function() { PF('myTable').filter(); }, 100);
});
</h:outputScript>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | AndreJ |