Is it possible to place the Global Filter outside the p:dataTable?

Question

I need to place the global filter of the p:dataTable outside of the table itself ,

I would like to place it outside the form in which the datatable exists, but for start placing the filter inside the datatable FORM but outside the datatable itself will be enough

Even when I place the filter inside the datatable FORM but outside the datatable itself , it stop working (it works 100% inside the p:dataTable itself)

Here is the definition of the filter itself

<p:inputText id="globalFilter" onkeyup="myTableNameTable.filter()" style="width:150px;"/>  

Answer 1

I solved the issue using a "proxy" button.

I set the h:panelGroup that surrounded the <p:inputText id="globalFilter"> with display:none style, like this:

<h:panelGroup style="display:none">  

then added an input text in completely other place

<h:panelGroup id="myFilter" >
    <h:inputText id="myFilter_text" />
</h:panelGroup>

And bound a JS function which uses the jQuery on() function (in older jQuery version you can use delegete()), like this:

    function searchKeyPressedHandler() {
        $(document).on("keyup", "#myFilter input", function (event) {
            var searchValue = document
                .getElementById('myFilter_text').value;

            $("#myTableId\\:globalFilter").val(searchValue);
            $("#myTableId\\:globalFilter").trigger('keyup')
        });
    }

Used the $() and on() because I'm using additional jQuery 1.7.1 library, otherwise I had to use the jQuery() and instead of

$(document).on("keyup", "#myFilter input",

I would use

jQuery(document).delegate("#myFilter input","keyup",... 

(just switched the first and the second arguments)

That's it, and I'm free to place the filter input where ever I want to.

Answer 2

Daniel, great answer. I am still using this today. Here is a more generic approach where the ID is only entered once and the tableId has been removed so that it can be reused easily.

function wireProxyFilter() {
    var proxyFilterJq = $("input[id$='globalFilterProxy']");
    var filterJq = $("input[id$='globalFilter']");
    
    proxyFilterJq.keyup( function () {
        var searchValue = proxyFilterJq.val();
        filterJq.val(searchValue);
        filterJq.trigger('keyup');
    });
}