是否可以将全局过滤器放在 p:dataTable 之外？答案

【问题标题】：Is it possible to place the Global Filter outside the p:dataTable?是否可以将全局过滤器放在 p:dataTable 之外？
【发布时间】：2012-01-08 09:38:16
【问题描述】：

我需要将 p:dataTable 的全局过滤器放在表本身之外，

我想将它放在数据表存在的表单之外，但是对于开始将过滤器放置在数据表表单内但数据表本身之外就足够了

即使我将过滤器放在数据表 FORM 内但在数据表本身之外，它也会停止工作（它在 p:dataTable 本身内 100% 工作）

这里是过滤器本身的定义

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

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

丹尼尔，很好的答案。我今天还在用这个。这是一种更通用的方法，其中 ID 只输入一次，并且 tableId 已被删除，以便可以轻松重用。

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');
    });
}

【讨论】：

【解决方案2】：

我使用“代理”按钮解决了这个问题。

我将<p:inputText id="globalFilter"> 周围的h:panelGroup 设置为display:none 样式，如下所示：

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

然后在完全不同的地方添加了一个输入文本

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

并绑定一个使用 jQuery on() 函数的 JS 函数（在旧 jQuery 版本中您可以使用 delegete()），如下所示：

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

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

使用 $() 和 on() 因为我使用的是额外的 jQuery 1.7.1 库，否则我必须使用 jQuery() 而不是

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

我会用

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

（只是切换了第一个和第二个参数）

就是这样，我可以随意将过滤器输入放置在我想要的任何位置。

【讨论】：