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>

Reload / Refresh web page using Javascript and jQuery

There are several ways to refresh a page using a button and javascript action.

.

<input onclick="history.go(0)" type="button" value="Reload Page" />

2.

<input onclick="window.location.reload" type="button" value="Reload Page" />

3.

<input onclick="window.location.href=window.location.href" type="button" value="Reload Page" />

One could also use jQuery datatable buttons for various actions. A simple "Refresh" button reloads the page in this case.

$(document).ready(function() {
 var oTable = $('#myTable').dataTable({
  "sDom" : 'T<"clear">lfrtip',
  "oTableTools" : {
   "aButtons" : [ {
    "sExtends" : "copy",
    "sButtonText" : "Copy"
   }, {
    "sExtends" : "xls",
    "sButtonText" : "XLS"
   }, {
    "sExtends" : "text",
    "sButtonText" : "Refresh",
    "fnClick": function ( nButton, oConfig, oFlash ) {
      javascript:window.location.reload(); 
   }} ]
  }
 });