Question

Since any JSF page gets transformed at the server side into its equivalent HTML and sent to the client for rendering, and JQuery at the client side takes the HTML and re renders it.

In theory it should be possible to take the HTML that is a generated by JSF and wrap it into JQuery, if so I would like to know how it’s done. Specifically using RichFaces as the JSF implementation if possible.

<rich:dataTable id="table">          
  <rich:column>

  </rich:column>
</rich:dataTable>

The above snippet of JSF is transformed into it’s equivalent HTML which is this

<table id="table">
  <tr>
    <td></td>
  </tr>
</table>

Shouldn’t it be possible to do something like this

<script type="text/javascript">
   $(document).ready(function () {
     $('#table').dataTable();
}
</script>

I’ve already tried that but it doesn’t seem to work.

So please if anyone has any hints, I’d be more than grateful.

Answer 1

Mixing JSF and jquery is doable but there are some gotchas.

JSF is taking over your ids, so if table is in a form with id “form”, the actual element id in html would be by default “form:table”. I think jquery could have a problem with colon in a selector, so you may mark your table with a class and select by that:

<rich:dataTable styleClass="my-table">          
  <rich:column>

  </rich:column>
</rich:dataTable>

and set selector as:

<script type="text/javascript">
   $(document).ready(function () {
     $('.my-table').dataTable();
}
</script>