null

Фильтрация таблицы в primefaces по дате

В заметке расскажу о том. как добавить к компоненту datatable из библиотеки компонентов primefaces фильтрацию по колонке, которая содержит дату.

Для начала рассмотрим простейший пример фильтрации таблицы, содержащей колонки в строковом виде. Ниже приведён код страницы.

 <p:dataTable  var="element" value="#{someBean.elements}">
    <p:column headerText="someHeader" sortBy="#{element.name}"
                     filterBy="#{element.name}" filterMatchMode="contains">
             <h:outputText value="#{element.name}"/>
    </p:column>

</p:dataTable>
                                   

Как видно из кода, для фильтрации используется атрибут filterBy тега p:column. В нём задаётся поле сущности по которому будет происходить фильтрация, а также атрибут filterMatchMode, определяющий то, как будет происходить фильтрация. Данный атрбибут может принимать следующие значения:  "startsWith", "endsWith", "contains", "exact", "equals".

Однако, такое не работает при использовании колонок, содержащих дату. Для этого необходимо использовать вложенный тег f:facet. Рассмотрим пример:

<p:column headerText="someHeader"
                   filterBy="#{element.date}" filterMatchMode="equals">
    <f:facet name="filter">
         <p:calendar pattern="dd.MM.yyyy">
                <p:ajax event="dateSelect" 
                             oncomplete="PF('table').filter()"/>
                <p:ajax event="change" execute="@this" 
                             oncomplete="PF('table').filter()" />
          </p:calendar>
   </f:facet>
   <h:outputText value="#{element.date}">
          <f:convertDateTime pattern="dd.MM.yyyy"/>
   </h:outputText>
</p:column>

Здесь, внутри тега f:facet со значение фильтр указан компонент, который будет использоваться для фильтрации. Для даты используется календарь для которого заданы два ajax-события.

Событие dateSelect вызывается в тот, момент, когда выбирается день внутри календаря, а событие change, когда пользователь изменяет значение поля и снимает с него фокус.

По завершении события вызывается js код, написанный в атрибуте oncomplete. В нём через объёкт PF, достаётся необходимая нам таблица и у неё вызывается функция фильтрации.

Второе событие необходимо для того, чтобы можно было стереть значение даты по которой производится фильтрация и получить все строки из таблицы.

 

На этом, пожалуй, откланяюсь.