Filtering Primefaces Datatable When Clicking a Button

Question

How can I filter a Primefaces datatable clicking on a commandLink button?

I'm trying to reach that using JQuery, but it is not working:

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

Relevant code:

<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>

Can someone help me, please ?

Thanks in advance.

EDITED:

In react to comments, I've received some help and found a solution to use in a column that has an input text field where we type some value to be filtered:

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

But in my question, I'm using a SelectCheckBoxMenu, where I have a list of values and I'm confused about what element(s) do I need to call to set the value and how to code that.

SelectCheckboxMenu elements - Primefaces Guide 6.2, pg. 452:

.ui-selectcheckboxmenu-items -> Option list container

.ui-selectcheckboxmenu-item -> Each options in the collection

.ui-chkbox -> Container of a checkbox.

I've found solutions to SelectOneMenu, but I don't know how to adapt/achieve this to SelectCheckboxMenu.

I've already tried the following, but no success:

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

Below, the (relevant) html code that I got with Chrome browser developer tool:

<div class="ui-column-customfilter">
  <div id="MyFormID:MyDatatableID:idBoxSituacao" class="ui-selectcheckboxmenu ui-widget ui-state-default ui-corner-all">
    <div class="ui-helper-hidden-accessible">
        <input id="MyFormID:MyDatatableID:idBoxSituacao_focus" name="MyFormID:MyDatatableID:idBoxSituacao_focus" type="text" readonly="readonly" aria-expanded="true" aria-labelledby="MyFormID:MyDatatableID:idBoxSituacao_label">
    </div>
    <div class="ui-helper-hidden">
        <input id="MyFormID:MyDatatableID:idBoxSituacao:0" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="A Vencer" data-escaped="true" onchange="PF('demandasTable').filter()" aria-checked="true">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:0">
                A Vencer
            </label>
        <input id="MyFormID:MyDatatableID:idBoxSituacao:1" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="A Vencer até 10 dias" data-escaped="true" onchange="PF('demandasTable').filter()" aria-checked="false">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:1">
                A Vencer até 10 dias
            </label>
        <input id="MyFormID:MyDatatableID:idBoxSituacao:2" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="Indefinida" data-escaped="true" onchange="PF('demandasTable').filter()" aria-checked="true">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:2">
                Indefinida
            </label>
        <input id="MyFormID:MyDatatableID:idBoxSituacao:3" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="Vence hoje" data-escaped="true" onchange="PF('demandasTable').filter()" aria-checked="false">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:3">
                Vence hoje
            </label>
        <input id="MyFormID:MyDatatableID:idBoxSituacao:4" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="Vencida" data-escaped="true" onchange="PF('demandasTable').filter()">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:4">
                Vencida
            </label>
    </div>
    <span class="ui-selectcheckboxmenu-label-container">
        <label class="ui-selectcheckboxmenu-label ui-corner-all" id="MyFormID:MyDatatableID:idBoxSituacao_label">
            Situação
        </label>
    </span>
    <div class="ui-selectcheckboxmenu-trigger ui-state-default ui-corner-right">
        <span class="ui-icon ui-icon-triangle-1-s">
        </span>
    </div>
  </div>
</div>

Can someone help me, please ?

I don't know (yet) JQuery very well, so I've researched and changed to ``, but still has no effect. These are the links where I'm trying to get a solution: [How to load a Primefaces datatable with default filters?](https://forum.primefaces.org/viewtopic.php?f=3&t=42553) and [setting default value in primefaces datatable Filter](https://stackoverflow.com/questions/15450274/setting-default-value-in-primefaces-datatable-filter). Any hints ? — jMarcel, Jun 14 '18 at 20:12
The adapted jquery code looks better but find the real client-side id of the filter field. Is it `MyFormID:MyDatatableID:MyColumnID` or is there some additional part (like `:filter` in it? Check with a browser developer tool. Split your problem. Does `$('#MyFormID\\:MyDatatableID\\:MyColumnID').val('123')` actually set the val in the input? Try from a browser developer tool. And the things I describe here are (just read it after commenting) already in the first link you posted (the 'filter' thing) and a different solution (selector for the input field) is in the second link. Both work! — Kukeltje, Jun 14 '18 at 20:51
I've checked with a browser developer tool, found the correspondent DOM element, adapted to `` and now it's working ! Then, I gave an id name to the desired column, since this DOM id could change, and adapted to ``, it's working too ! — jMarcel, Jun 15 '18 at 14:59
The column has an input text field to filter by the inputed value. Now, when I click the button, the text is automagically setted in that input text field and the datatable is filtered. But how can I set the value in a column that has a list of values in a combo box ? In DOM, I saw that each combo box value is ``, ``,`[...] j_idt120:2" value="789"[...]>`. Any hint ? — jMarcel, Jun 15 '18 at 15:23
You can fairly easily formulate your 'new question'... Think... What component is it? And what are you trying to (techically) achieve? Resulting question: "How do I set the value of a PrimeFaces via Javascript?" Which I'm certain has a Q/A in Stackoverflow... Cheers... — Kukeltje, Jun 15 '18 at 16:09
Hi Kukeltje! Sorry friend, but don't you think that is clear enough that the type of the component and what I'm trying to (techically) achieve is already present in my Question? Anyway, thanks to you untill now, I edited that showing where I reached so far. I'd go for lazyDataModel too, but unfortunatelly it's not up to me decide it in this Project I'm working on. — jMarcel, Jun 15 '18 at 20:33
Yes, so why do you ask instead of searching for it... I 'generalize' the issue. Otherwise you'd ask again for a calendar, a selectOneMenu etc... — Kukeltje, Jun 15 '18 at 20:54
I've searched and keep searching, but I still have doubts. I think everyone who asks here has doubts and is looking for answers from who likes to help and share their knowledge to resolve it, right? :-) I agree to generalize the issue to avoid much asking in the same Question, but it's not my case here, since I've asked how to filter a Primefaces Datatable when clicking a button using JQuery, and in my relevant code has only one column, which has the SelectManyCheckBoxMenu component to be filtered by ;-) — jMarcel, Jun 15 '18 at 22:33
Continue from `$('#MyFormID\\:MyDatatableID\\:MyColumnID_panel .ui-selectcheckboxmenu-list-item div div.ui-chkbox-box')[0].click()` — Kukeltje, Jun 16 '18 at 07:40
I've tried that last code you've posted, but didn't work. I've been researching a solution since then and updated the question with it. Can you help me, please ? — jMarcel, Jun 22 '18 at 21:10
Kukeltje, I've been trying to resolve since then and today I finally resolved it! I've posted the solution and I can say that this was possible thanks to you, who helped me with the hints I needed! Thank you so much! — jMarcel, Jun 25 '18 at 18:06

score 1 · Accepted Answer · answered Jun 25 '18 at 18:02

1

After persisting so hard and researching, I've finally resolved it:

In the column:

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

In the commandButton:

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

Where '1' is the index of the list in the options corresponding to the value I want to filter by; in that case, '123' as the example.

answered Jun 25 '18 at 18:02

jMarcel

958
5
24
54

Yes, I'm using 6.2 ! – jMarcel Jun 25 '18 at 20:12
Hmmmm this I tried first and it did not work for me on 6.2. Do you use 6.2 (Sorry had a typo. Removed and reposted... and only noticed your reply after my removal) – Kukeltje Jun 25 '18 at 20:13

Filtering Primefaces Datatable When Clicking a Button

1 Answers1