Attach Jquery events to JSF data tables

Question

Since we can apply JQuery to any JSF rendered components, as in the following question

After having tried that, it did work I can successfully integrate JQuery into JSF, but the problem is that whenever I re-render the h:dataTable for instance, JQuery stops working, -I'm using RichFaces and the a4j, by the way-.

For example, I have a data table as follows

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

and I have a button that when clicked re-renders the dataTable, and repopulate it with new data.

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

and not to forget I have this script in the page

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

Now when the page is first loaded, sorting works fine, but whenever I click the button to re-render the table, the table is successfully populated with the new data from the backing bean, but the sorting doesn't work anymore.

From what I guess, I think this might has something to do with the

jQuery(document).ready()

which applies the

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

only when the document is ready, so I was wondering if there's some events in jQuery that I can attach to the dataTable re-render event, as I'm no guru at JQuery or JS.

Can you show use the button / link that re-renders the table? Is it done with Ajax? — Romain Linsolas
yes I can use it and it works perfectly, please notice that the above data table code is only a snippet, I have no problem updating the values of the data table, nor with the ajax events — Sabry Shawally
I don't know how richfaces works, but I'd try <a4j:commandButton value="Click" reRender="someDataTable" oncomplete="reRenderJQuery()/> where reRenderJQuery() is a javascript function that simply does jQuery('.table').dataTable({ "bSort": false}); }); , but I don't know if Richfaces' commandButton handles ajax events! — StepTNT

BalusC BalusC · Accepted Answer · 2012-05-15T13:20:01

Just re-execute the script when the ajax request has completed.

First refactor your script into a reuseable function.

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

Then invoke the same function in oncomplete of <a4j:commandButton>.

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

Attach Jquery events to JSF data tables

1 Answers