How to merge cells in a primefaces datatable row?

Question

Is this possible with datatable tags or CSS ? Any solution is helpful. If possible, search fileds for date can be in a same column.

Primefaces datatable:

datatable

Code for datatable:

<p:dataTable> <p:column filterBy="#{log.mbr}" sortBy="#{log.mbr}" headerText="mbr"> <h:outputText value="#{log.mbr}" /> </p:column> <p:column id="dateFrom" headerText="datum od" filterBy="#{log.datumOd}" sortBy="#{log.datumUpisa}"> <f:facet name="filter"> <p:calendar onkeypress="PF('loggerTable').filter()" onchange="PF('loggerTable').filter()" id="from" styleClass="customCalendar" pattern="dd/MM/yyyy" widgetVar="dateFrom"> <p:ajax event="dateSelect" oncomplete="PF('loggerTable').filter()" update="logsTable" /> </p:calendar> </f:facet> <h:outputText id="datumOdZaBrisanje" value="#{log.datumUpisa}" /> </p:column> <p:column id="dateTo" headerText="datum do" filterBy="#{log.datumDo}"> <f:facet name="filter"> <p:calendar onchange="PF('loggerTable').filter()" id="to" styleClass="customCalendar" pattern="dd/MM/yyyy" widgetVar="calendarFrom"> <p:ajax event="dateSelect" oncomplete="PF('loggerTable').filter()" update="logsTable" /> </p:calendar> </f:facet> </p:column> <p:column style="width:40px;text-align: center" headerText="prikaz"> <p:commandButton update=":form:logDetail" oncomplete="PF('logDialog').initPosition();PF('logDialog').show()" icon="fa fa-search"> <f:setPropertyActionListener value="#{log}" target="#{logger.selectedLog}" /> </p:commandButton> </p:column> </p:dataTable>

You want to filter the date from date od - to?? Or Date od and Date to are two different dates? — tsotzolas
– tsotzolas, Commented Jul 22, 2019 at 16:25
Only one date.. if dateOd (dateFrom) is selected date must be after, if dateDo (dateTo) is selected date must be before, if both selected date is between — Rattus
– Rattus, Commented Jul 22, 2019 at 16:43
I think you must change the description. You want date filtering between 2 days — tsotzolas
– tsotzolas, Commented Jul 22, 2019 at 16:59

tsotzolas · Accepted Answer · 2019-07-22 17:19:01Z

This code do something like that.

The xhtml

 <p:dataTable id="MissionTable" value="#{MissionsBean.missionsList}" var="record" widgetVar="MissionTable" selection="#{MissionsBean.mission}" rowKey="#{record}" filterDelay="600" > ............. <p:column headerText="Date Start" sortBy="#{record.missionDateStart}" filterBy="#{record.missionDateStart}" filterFunction="#{MissionsBean.filterByDateStart}" filterMatchMode="contains" style="width: 180px!important; text-align: center;"> <f:facet name="filter"> <h:inputHidden id="filter"/> </f:facet> <f:facet name="header"> <p:link value="Date Start" style="color: white;" onclick="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = ''" /> <br/> <p:calendar id="sfrom" pattern="dd/MM/yy" size="4" navigator="true"> <p:ajax event="dateSelect" onstart="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = $(PrimeFaces.escapeClientId('#{p:component('sfrom')}_input'))[0].value + '>' + $(PrimeFaces.escapeClientId('#{p:component('sto')}_input'))[0].value" oncomplete="PF('MissionTable').filter()"/> </p:calendar> <h:outputText class="fa fa-arrows-h fa-2x" style="vertical-align: middle;"/> <p:calendar id="sto" pattern="dd/MM/yy" size="4" navigator="true"> <p:ajax event="dateSelect" onstart="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = $(PrimeFaces.escapeClientId('#{p:component('sfrom')}_input'))[0].value + '>' + $(PrimeFaces.escapeClientId('#{p:component('sto')}_input'))[0].value" oncomplete="PF('MissionTable').filter()"/> </p:calendar> </f:facet> <h:outputText value="#{record.missionDateStart}"> <f:convertDateTime pattern="dd MMM yyyy HH:mm"></f:convertDateTime> </h:outputText> </p:column> ...................... </p:dataTable>

And the Custom filter is

 public boolean filterByDate(Object value, Object filter, Locale locale) { String filterText = (filter == null) ? null : filter.toString().trim(); if (filterText == null || filterText.isEmpty()) { return true; } if (value == null) { return false; } DateTimeFormatter sdf = DateTimeFormatter.ofPattern("dd/MM/yy"); Instant instant = ((Date) value).toInstant(); //Zone : UTC+0 LocalDate dateValue = instant.atZone(ZoneId.of("Europe/Athens")).toLocalDate(); LocalDate dateFrom; LocalDate dateTo; try { String fromPart = filterText.substring(0, filterText.indexOf(">")); String toPart = filterText.substring(filterText.indexOf(">") + 1); dateFrom = fromPart.isEmpty() ? null : LocalDate.parse(fromPart, sdf); dateTo = toPart.isEmpty() ? null : LocalDate.parse(toPart, sdf); } catch (Exception e) { log.error("unable to parse date: " + filterText, e); return false; } return (dateFrom == null || dateValue.isAfter(dateFrom) || dateValue.isEqual(dateFrom)) && (dateTo == null || dateValue.isBefore(dateTo) || dateValue.isEqual(dateTo)); }

As good as I remember I wrote my code according to this answer

Be careful the date pattern. In my example is different from yours.

Sorry but I couldn't adjust my code to yours. I hope this code will help you.

If you use Primefaces 7 you can try to use datePicker Range Selection:

Collectives™ on Stack Overflow

How to merge cells in a primefaces datatable row?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related