jQuery datatable and JSF h:datatable within h:form

If you would like to place a h:datatable inside of a form and still user jQuery datatable plugin to format your table, you need to point the jQuery to the right location in the xhtml page.

Be careful to escape the ":" between the form and datatable names in the jQuery initializaton with "\\:"

Example:

test.xhtml:

<h:head>
...
<h:outputStylesheet name="main.css" library="css" />
<style type="text/css" title="currentStyle">
@import "./resources/css/TableTools.css";</style>
<script type="text/javascript" 
  src="./resources/js/jquery.js"></script>
<script type="text/javascript"
  src="./resources/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" 
  src="./resources/js/ZeroClipboard.js"></script>
<script type="text/javascript"
  src="./resources/js/TableTools.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm\\:myTable').dataTable({
  "sDom" : 'T<"clear">lfrtip',
  "oTableTools" : {
   "aButtons" : [ {
    "sExtends" : "copy",
    "sButtonText" : "Copy"
   }, {
    "sExtends" : "csv",
    "sButtonText" : "CSV"
   }, {
    "sExtends" : "xls",
    "sButtonText" : "XLS"
   }, {
    "sExtends" : "text",
    "sButtonText" : "resetsort"
   } ]
  }
 });
</script>
</h:head>
<h:body>
<h:form id="myForm">
<h:dataTable id="myTable" >
..
</h:dataTable>
</h:form>
</h:body>