Tuesday, August 28, 2012


Combining Display Tag to Jquery Datatable

Scripts to be embed in head of jsp:

We can get these files in the folder of the data tables downloaded from:



<style type="text/css" title="currentStyle">
    @import "media/css/demo_page.css";
    @import "media/css/header.ccss";
      @import "media/css/demo_table_jui.css";
      @import "examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
     
      @import "media/css/demo_page.css";
      @import "media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
           
            var oTable = $('#tableID).dataTable( {
                  bJQueryUI: true,
                  "bPaginate":true,
            "bLengthChange":true,
            "bFilter":true,
            "bSort":true,
            "bInfo":true,
            "bAutoWidth":true,
            "bStateSave":false,
            sPaginationType: "full_numbers"
           } );
      } );
</script>

Here tableID is the id of the display tag table.

  And we are good to go.