ace:dataTable default filter

Question

My web application uses an <ace:dataTable> and I want to add a default filter to a column. The datatable uses lazy loading. I know that I can add the filter in my managed bean to the "load"-method.

But I need to set the filter into the filter "textbox" in the view at the start of rendering the page, not implementing the filter in the managed bean.

How can I achieve this?

I'd do this through jQuery using the default jsf id's. – Guillermo Nov 06 '12 at 15:40 — Guillermo, Nov 06 '12 at 15:40

score 1 · Accepted Answer · answered Nov 07 '12 at 08:42

If I'd understand your problem. If you got a datatable like this:

<ace:dataTable id="carTable"
                  value="#{dataTableBean.carsData}"
                  var="car"
                  paginator="true"
                  paginatorPosition="bottom"
                  rows="10">
        <ace:column id="id" headerText="ID" sortBy="#{car.id}"
                    filterBy="#{car.id}" filterMatchMode="contains">
            <h:outputText id="idCell" value="#{car.id}"/>
        </ace:column>
    </ace:dataTable>

You got an html code like this:

<div class="ui-datatable ui-widget" id="form:carTable">
<div>
    <table>
        <thead>
            <tr>
                <th class="ui-widget-header">
                    <div class="ui-header-column ui-sortable-column clickable" id="form:carTable:id">
                        <span>
                            <span class="ui-header-text" id="form:carTable:id_text">ID</span>
                        </span>
                        <span class="ui-header-right">
                            <span class="ui-sortable-control">
                                <span class="ui-sortable-column-icon">
                                    <a class="ui-icon ui-icon-triangle-1-n" tabindex="0"
                                       style="opacity: 0.33; "></a>
                                    <a class="ui-icon ui-icon-triangle-1-s" tabindex="0"
                                       style="opacity: 0.33; "></a>
                                </span>
                                <span class="ui-sortable-column-order"></span>
                            </span>
                        </span>
                        <input class="ui-column-filter" id="form:carTable:id_filter" name="form:carTable:id_filter"
                               size="1" tabindex="0" value=""/>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody class="ui-datatable-data ui-widget-content">
            <tr class=" ui-datatable-even  " id="form:carTable_row_0" tabindex="0">
                <td>
                    <span id="form:carTable:0:idCell">1</span>
                </td>
            </tr>
            <tr class=" ui-datatable-odd  " id="form:carTable_row_1" tabindex="0">
                <td>
                    <span id="form:carTable:1:idCell">2</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

There you can see the input. Then I'd use jQuery:

$(document).ready(function() {
$('[id$=id_filter]').html("default_text_for_filtering");});

Thank you for this solution. I always try to use JS Code not so often, but sometimes.. :) — Nils, Nov 07 '12 at 12:57
Me too. You have to think but that jsf tries to simplify the web dev which implies several limitations. — Guillermo, Nov 08 '12 at 08:26

ace:dataTable default filter

1 Answers1