将 Jquery 事件附加到 JSF 数据表答案

【问题标题】：Attach Jquery events to JSF data tables将 Jquery 事件附加到 JSF 数据表
【发布时间】：2012-05-22 19:18:09
【问题描述】：

因为我们可以将 JQuery 应用于任何 JSF 渲染的组件，如以下问题所示

在尝试之后，它确实起作用了，我可以成功地将 JQuery 集成到 JSF 中，但问题是每当我重新渲染 h:dataTable 时，JQuery 就会停止工作， -顺便说一下，我正在使用 RichFaces 和 a4j-。

比如我有一个数据表如下

<h:dataTable id="someDataTable" value="#{backingBean.someDataModel}" var="item" styleClass="table">
   <h:column>
      <h:outputText value="#{item.text}"/>
   </h:column>
</h:dataTable>

我有一个按钮，单击该按钮会重新呈现数据表，并用新数据重新填充它。

<a4j:commandButton value="Click" reRender="someDataTable"/>

别忘了我在页面中有这个脚本

<script>
  jQuery.noConflict();
   jQuery(document).ready(function () {
      jQuery('.table').dataTable({
    "bSort": false}); 
    });
</script>

现在第一次加载页面时，排序工作正常，但每当我单击按钮重新渲染表格时，表格已成功填充来自支持 bean 的新数据，但排序不再起作用.

根据我的猜测，我认为这可能与

jQuery(document).ready()

适用于

jQuery.('.table').dataTable();

仅当文档准备好时，所以我想知道 jQuery 中是否有一些事件可以附加到 dataTable 重新渲染事件，因为我不是 JQuery 或 JS 的专家。

【问题讨论】：

你能显示使用重新呈现表格的按钮/链接吗？用 Ajax 完成了吗？
是的，我可以使用它并且它工作得很好，请注意上面的数据表代码只是一个sn-p，我更新数据表的值没有问题，也没有ajax事件
我不知道richfaces 是如何工作的，但我会尝试<a4j:commandButton value="Click" reRender="someDataTable" oncomplete="reRenderJQuery()/> 其中reRenderJQuery() 是一个javascript 函数，它只执行jQuery('.table').dataTable({ "bSort": false}); }); ，但我不知道Richfaces 的commandButton 是否处理 ajax 事件！
我会尝试并告诉你
我试过了，还是不行

标签： java javascript jquery jsf richfaces

【解决方案1】：

只需在 ajax 请求完成后重新执行脚本即可。

首先将您的脚本重构为可重用的函数。

<script>
    jQuery.noConflict();
    jQuery(document).ready(function() {
        initDataTable();
    });
    function initDataTable() {
        jQuery('.table').dataTable({
            "bSort": false
        }); 
    }
</script>

然后在<a4j:commandButton> 的oncomplete 中调用相同的函数。

<a4j:commandButton ... oncomplete="initDataTable()" />

【讨论】：