[RESOLVIDO] Filtrar Datatable Primefaces Ao Clicar Em Um Botão

Olá pessoal.

Como filtrar uma datatable do Primefaces ao clicar em um botão ?

Eu estou tentando fazer isso usando JQuery, mas não está funcionando:

<p:commandLink id="filterLink" value="Click to Filter" onclick=" $('#MyFormID\\:MyDatatableID\\:MyColumnID').val('123').filter().trigger('keyup')" />

Código relevante:

<h:form id="MyFormID">
    <p:panel id="MyPanelID" header="Some title">
        <p:dataTable id="MyDatatableID"
                     value="#{myController.items}"
                     rowKey="#{item.id}"
                     var="item"
                     selection="#{myController.selected}"
                     filteredValue="#{myController.filteredDemandas}"
                     widgetVar="wv">

            <p:column id="MyColumnID" sortBy="#{item.status.status}" filterBy="#{item.status.status}" filterMatchMode="in">
                <f:facet name="header">
                    <h:outputText value="MyColumnName" />
                </f:facet>
                <f:facet name="filter">
                    <p:selectCheckboxMenu label="MyColumnTitleName" onchange="PF('wv').filter()" >
                        <f:selectItems value="#{myController.listValues}" />
                    </p:selectCheckboxMenu>
                </f:facet>
                <h:outputText value="#{item.status.status}"/>
            </p:column>
          <!-- some code ommited -->
        </p:dataTable>
    </p:panel>
</h:form>

Alguém pode me ajudar, por favor?

E por que não com um evento de um commandButton?

Mas usando um evento de um commandButton é possível setar o valor na coluna em questão para filtrar a tabela?:thinking: Se der pra fazer assim, claro que pode ser!:smiley: Mas não sei como.:confused:

O código abaixa altera o valor de idade para 100 ao clicar no botao, então se o atributo usado para filtrar for a idade, filtrara os objetos q tem a idade 100


<p:commandButton ...>
    <f:setPropertyActionListener value="100" target="#{meuBean.idade}" />
</p:commandButton>

Eu tentei usando o f:setPropertyActionListener conforme abaixo, mas não deu certo:

<p:commandButton id="cb" value="test setPropertyActionListener">
    <f:setPropertyActionListener value="3" target="#{demandasController.selected.situacao.idSituacao}">
        <p:ajax event="filter" onsuccess="PF('demandasTable').filter();" />
    </f:setPropertyActionListener>
</p:commandButton>

Caso eu não tenha selecionado nenhuma linha da Datatable, é lançada a Exception:

javax.el.PropertyNotFoundException: /WEB-INF/include/entity/demandas/List.xhtml @24,116 target="#{demandasController.selected.situacao.idSituacao}": Target Unreachable, 'null' returned null

E mesmo selecionando alguma linha da Datatable, ao clicar no commandButton, nada acontece.

Alguma dica?

Eu consegui obter o resultado desejado usando JQuery:

<p:commandLink id="filterLink" value="Click para Filtrar" 
onclick="$('#MyFormID\\:MyDatatableID\\:MyColumnID\\:filter').val('123'); PF('wv').filter();" 
/>

Porém, o código acima funciona apenas para colunas que tem um campo input text, onde o user digita algum valor para filtrar a tabela.

Mas, conforme perguntei no início, preciso setar um valor padrão numa lista de valores (listValues) exibida através do componente p:selectCheckboxMenu.

Por favor, alguém sabe como faço para setar um valor padrão em um componente p:selectCheckboxMenu usando JQuery ? Se alguém quiser apresentar outra solução, será muto bem-vinda.

Testa o código abaixo:

<p:commandButton id="cb" value="test setPropertyActionListener" onclick="PF('demandasTable').filter();" update="demandasTable">
        <f:setPropertyActionListener value="3" target="#{demandasController.selected.situacao.idSituacao}">      </f:setPropertyActionListener>
</p:commandButton>

Oi Mike! Tentei conforme você colocou, mas aconteceu a mesma coisa: se não seleciono alguma linha na datatable, lança a Exception; se seleciono, nada acontece :confused:

Só fiz uma pequena correção no seu último código, trocando o widgetvar demandasTable do update pelo id da datatable, que está definido como MyDatatableID :+1:

<p:commandButton id="cb" value="test" onclick="PF('demandasTable').filter();" update="MyDatatableID">
    <f:setPropertyActionListener value="3" target="#{demandasController.selected.situacao.idSituacao}" />
</p:commandButton>

Eu fiz umas pesquisas e tentei adaptar uma solução conforme as formas abaixo, mas todas sem sucesso :weary::

<p:commandLink value="test1" onclick=" $('#MyFormID\\:MyDatatableID\\:mySelectcheckboxmenuItemsID').val('123'); PF('myDatatableWV').filter();" />
<p:commandLink value="test2" onclick=" PF('myWVSelectcheckboxmenu').jq.find('.ui-selectcheckboxmenu-item:eq(3)').click(); PF('myDatatableWV').filter();" />
<p:commandLink value="test3" onclick=" PF('myWVSelectcheckboxmenu').jq.find('.ui-selectcheckboxmenu-items:eq(3)').click(); PF('myDatatableWV').filter();" />
<p:commandLink value="test4" onclick=$('#MyFormID\\:MyDatatableID\\:MyColumnID_panel .ui-selectcheckboxmenu-list-item div div.ui-chkbox-box')[3].click()'); PF('myDatatableWV').filter();" />

Ah sim, eu passei o id ao invés do widget var (errei)

Coloca process="@this" no commandButton que a exceção deve parar

Só para ver se eu realmente entendi:

Você quer clicar em um botão e esse botao mandar um valor para um campo que será utilizado como filtro?

Coloquei Mike, mas continuou a mesma coisa. :weary:

Isso, eu quero clicar em um botão e a tabela ser filtrada com um valor (hard coded mesmo) definido no código.

Com o código abaixo, eu clico no botão, ele preenche automagicamente o input text da coluna (MyColumnID) com o valor 123 e em seguida filtra a tabela (wv) com esse valor:

<p:commandLink id="filterLink" value="Click para Filtrar" 
onclick="$('#MyFormID\\:MyDatatableID\\:MyColumnID\\:filter').val('123'); PF('wv').filter();" 
/>

Só preciso saber como setar o valor num componente p:selectcheckboxmenu .

Tenha duas listas, uma com todos os elementos e outra com os que você quer deixar previamente adicionada

@PostConstruct
public void init() {
            dayList= new ArrayList<String>();
            dayList.add("Mon");
            dayList.add("Tue");
            dayList.add("Wed");
            dayList.add("Thu");
            dayList.add("Fri");
            dayList.add("Sat");
            dayList.add("Sun");

            selectedDayList= new ArrayList<String>();
            selectedDayList.add("Tue");
            selectedDayList.add("Wed");
}

public List<String> getDayList()
    {
        return dayList;
    }

public List<String> getSelectedDaylist()
    {
        return selectedDayList;
    }

<p:selectCheckboxMenu id="trdays" 
             value="#{mybean.selectedDaylist}"
             label="Select Days">
      <f:selectItems value="#{mybean.dayList}" var="day"
       itemValue="#{day.value}" itemLabel="#{day.name}"/>
</p:selectCheckboxMenu>

Mike, eu tentei, mas não consegui resolver porque começou a dar outras Exceptions.

Mas felizmente consegui resolver da maneira mais fácil via JQuery, que é como eu pretendia. Veja a solução abaixo.

De qualquer forma, agradeço muito pela sua ajuda, e posso dizer que aprendi mais essa forma com setPropertyActionListener.

1 curtida

Na coluna onde tem o selectCheckboxMenu:

<p:selectCheckboxMenu id="MyBoxID" ... />

No commandButton:

<p:commandButton value="click to filter" onclick=" $('#MyFormID\\:MyDatatableID\\:MyBoxID\\:1').click(); PF('MyDatatableWidgetVar').filter();" />

Onde ‘1’ é o índice da lista referente às opções correspondentes ao valor pelo qual eu quero filtrar.

1 curtida

Obrigado pelo retorno @jMarcel
O setPropertyActionListener é bem simples e eficiente quando desejamos alterar o valor de um atributo do bean, tem o f:param que armazena um valor na sessão, ambos uteis.

Com jquery eu não pudi te ajudar, js é meu ponto fraco haha. To estudando ele esses dias
Obrigado por postar a solução, com certeza ajudará vários, já que praticamente não ha nada a respeito de selectCheckboxMenu