Primefaces’s DataTable is such a nice component where it allows me to implement filter on the table without additional code. There is still limitation when filter on calendar as I need to type in exactly the same string as shown in cell. I received complaint from users mention that it should be restrict to only calendar input to avoid human typo error. This sound like a lot of code change to my existing code!
<p:dataTable id="dataTable">
...
<p:column id="listOn"
headerText="Listing Date"
filterFunction="#{uploadFileController.filterByDate}"
filterBy="#{dataItem.listOn}">
<p:outputLabel value="#{dataItem.listOn}">
<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" />
</p:outputLabel>
</p:column>
<p:dataTable>
The piece above shows the original code implementing default filter. But after some try and error it doesn’t seem that difficult. Here are the steps to accomplish the task.
- Attach the calendar into filter input.
- Update data table view after a date is select from calendar input.
- Reset data table view after filter input value is wiped off.
<p:dataTable id="dataTable" widgetVar=”theTable”>
...
<p:column id="listOn"
headerText="Listing Date"
filterFunction="#{theController.filterByDate}"
filterBy="#{dataItem.listOn}">
<f:facet name="filter">
<p:calendar id="cal1" pattern="yyyy-MM-dd">
<p:ajax event="dateSelect" oncomplete="PF('theTable').filter()" update="dataTable" />
<p:ajax event="change" execute="@this" oncomplete="PF('theTable').filter()" update="dataTable"/>
</p:calendar>
</f:facet>
<p:outputLabel value="#{dataItem.listOn}">
<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" />
</p:outputLabel>
</p:column>
<p:dataTable>
No comments:
Post a Comment