java - 将 Jquery 事件附加到 JSF 数据表

Question

因为我们可以将 JQuery 应用于任何 JSF 呈现的组件，如下面的问题

JSF to JQuery Component Integration

尝试之后，它确实有效，我可以成功地将 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 的专家。

Answer 1

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

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

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

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

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