Jquery Primefaces-用于dataTable中实时筛选的自定义组件

PrimeFaces为p:dataTable提供了非常好的过滤器。UX站点的过滤效果非常好，因为过滤字段位于列标题中，所以毫无疑问您正在过滤什么，并且它正在实时工作——数据会随着您键入的内容而变化（好吧，只有在您短暂暂停的情况下，但我认为这正是用户所期望的）

现在，我想在标题中放置一些自定义内容，作为过滤器。所以，我的想法是在header方面放置一个组件：

问题是，

filterAction

不能更新整个dataTable组件（因为用户正在键入的组件将被重新创建），但必须更新表体

我认为我可以使用PrimeFaces选择器（基于jQuery选择器）来实现这一点，但根据主题，这是不可能的。js包含专门的Ajax调用来实现这一点（PrimeFaces 3.5版本中的第839行）：

options.onsuccess=函数（responseXML）{
var xmlDoc=$（responseXML.documentElement），
updates=xmlDoc.find（“更新”）；
....
$this.tbody.html（内容）；

我的问题是，是否可以使用这样一个单独的过滤器组件，只刷新表体，就像标准过滤器一样，而不深入PF内部并编写专门的AJAX处理程序

---

当然，可以在dataTable之外进行筛选，但是UX会减少（现在使用我的应用程序的人非常喜欢当前的设计）.

可以使用

facet

将任何组件放在列标题中。但是，不可能只请求dataTable body刷新。因此，解决方案是发送普通请求，而是接管响应并在自定义代码部分处理它

如果这样创建remoteCommand：

var xml = $(resp.documentElement)
updates = xml.find('update')
for(var i=0; i < updates.length; i++) {
var update = updates.eq(i),
id = update.attr('id'),
content = update.text();
if(id == carsTable.id){
   var tbody = $(content).find('tbody')
   carsTable.tbody.html(tbody.html());
}
else {
   PrimeFaces.ajax.AjaxUtils.updateElement.call(this, id, content);
}
PrimeFaces.ajax.AjaxUtils.handleResponse.call(this, xml);
var paginator = carsTable.getPaginator();
if(paginator) {
    paginator.setTotalRecords(this.args.totalRecords);
}
if(carsTables.cfg.scrollable) {
    carsTable.alignScrollBody();
}
return true;

该命令的ID被发送到服务器。知道了这一点，我们可以准备自定义AJAX请求：

var选项={
来源：'main:tabView:refreshDataTable'，
更新：carsTable.id，
formId:carsTable.cfg.formId
}
options.onsuccess=customHandler
ajax.AjaxRequest（选项）；

其中customHandler代码如下所示：

var xml = $(resp.documentElement)
updates = xml.find('update')
for(var i=0; i < updates.length; i++) {
var update = updates.eq(i),
id = update.attr('id'),
content = update.text();
if(id == carsTable.id){
   var tbody = $(content).find('tbody')
   carsTable.tbody.html(tbody.html());
}
else {
   PrimeFaces.ajax.AjaxUtils.updateElement.call(this, id, content);
}
PrimeFaces.ajax.AjaxUtils.handleResponse.call(this, xml);
var paginator = carsTable.getPaginator();
if(paginator) {
    paginator.setTotalRecords(this.args.totalRecords);
}
if(carsTables.cfg.scrollable) {
    carsTable.alignScrollBody();
}
return true;

---

可以使用

facet

将任何组件放在列标题中。但是，不可能只请求dataTable body刷新。因此，解决方案是发送普通请求，而是接管响应并在自定义代码部分处理它

如果这样创建remoteCommand：

var xml = $(resp.documentElement)
updates = xml.find('update')
for(var i=0; i < updates.length; i++) {
var update = updates.eq(i),
id = update.attr('id'),
content = update.text();
if(id == carsTable.id){
   var tbody = $(content).find('tbody')
   carsTable.tbody.html(tbody.html());
}
else {
   PrimeFaces.ajax.AjaxUtils.updateElement.call(this, id, content);
}
PrimeFaces.ajax.AjaxUtils.handleResponse.call(this, xml);
var paginator = carsTable.getPaginator();
if(paginator) {
    paginator.setTotalRecords(this.args.totalRecords);
}
if(carsTables.cfg.scrollable) {
    carsTable.alignScrollBody();
}
return true;

该命令的ID被发送到服务器。知道了这一点，我们可以准备自定义AJAX请求：

var选项={
来源：'main:tabView:refreshDataTable'，
更新：carsTable.id，
formId:carsTable.cfg.formId
}
options.onsuccess=customHandler
ajax.AjaxRequest（选项）；

其中customHandler代码如下所示：

var xml = $(resp.documentElement)
updates = xml.find('update')
for(var i=0; i < updates.length; i++) {
var update = updates.eq(i),
id = update.attr('id'),
content = update.text();
if(id == carsTable.id){
   var tbody = $(content).find('tbody')
   carsTable.tbody.html(tbody.html());
}
else {
   PrimeFaces.ajax.AjaxUtils.updateElement.call(this, id, content);
}
PrimeFaces.ajax.AjaxUtils.handleResponse.call(this, xml);
var paginator = carsTable.getPaginator();
if(paginator) {
    paginator.setTotalRecords(this.args.totalRecords);
}
if(carsTables.cfg.scrollable) {
    carsTable.alignScrollBody();
}
return true;

---

对于Primefaces 5，有一个新的属性filterFunction，可以在Java代码中定义自定义过滤器：

但是，过滤器输入仍然是输入文本中的字符串

如果您需要一个自定义组件来输入过滤器值，或者您一直使用Primefaces 4（正如我在最近的一个项目中所做的那样），我将描述什么对我有用

我使用以下关键步骤扩展了过滤行为

• 将一个普通的JSF输入组件放入列的标题方面，而不是使用filterBy属性
• 将javascript回调附加到此在用户输入时触发的组件，该组件调用PF（'dataTableWidgetVar'）。filter（）
• 将filteredValue属性添加到dataTable，这将在现有筛选器的基础上应用Java setter中的自定义筛选器

关键是要利用filteredValue属性—当调用Primefaces filter（）函数或Primefaces筛选器更改时，filteredValue设置为列出筛选值（如果未应用筛选器，则设置为null）。然后Primefaces从getter读取filteredValues以更新dataTable中的项列表。如果我们将筛选器放在这些调用之间（在getter或setter中，setter更有效，因为只有在筛选器更改时才会调用它），我们将使用筛选器修改原始筛选列表，并通过getter将其返回

一些代码：

以inputText作为筛选组件的datatable定义：

<p:dataTable filteredValue="#{view.filteredResults} >
    ...
    <p:columnGroup type="header">
    ...
        <p:row>
    ...
           <p:column>
               <f:facet name="header">
                    <p:inputText value="#{view.filterValue}" />
                </f:facet>
           </p:column>

    ...
</p:dataTable>

---

对于Primefaces 5，有一个新的属性filterFunction，可以在Java代码中定义自定义过滤器：

但是，过滤器输入仍然是输入文本中的字符串

如果您需要一个自定义组件来输入过滤器值，或者您一直使用Primefaces 4（正如我在最近的一个项目中所做的那样），我将描述什么对我有用

我使用以下关键步骤扩展了过滤行为


将一个普通的JSF输入组件放入列的标题方面，而不是使用filterBy属性
将javascript回调附加到此在用户输入时触发的组件，该组件调用PF（'dataTableWidgetVar'）。filter（）
将filteredValue属性添加到dataTable，这将在现有筛选器的基础上应用Java setter中的自定义筛选器

关键是要利用filteredValue属性—当调用Primefaces filter（）函数或Primefaces筛选器更改时，filteredValue设置为列出筛选值（如果未应用筛选器，则设置为null）。然后Primefaces从getter读取filteredValues以更新dataTable中的项列表。如果我们将筛选器放在这些调用之间（在getter或setter中，setter更有效，因为只有在筛选器更改时才会调用它），我们将使用筛选器修改原始筛选列表，并通过getter将其返回

一些代码：

以inputText作为筛选组件的datatable定义：

<p:dataTable filteredValue="#{view.filteredResults} >
    ...
    <p:columnGroup type="header">
    ...
        <p:row>
    ...
           <p:column>
               <f:facet name="header">
                    <p:inputText value="#{view.filterValue}" />
                </f:facet>
           </p:column>

    ...
</p:dataTable>