Start using jQuery DataTable to show ticket list

Easy Sample for jQuery DataTable

It very simple to use jQuery DataTable. Assume we have a table like the following

<table id="tickets">
<thead>
  <th>ID</th>
  <th>Summary</th>
  <th>Owner</th>
  <th>Priority</th>
</thead>
  <tr>
    <td>123</td>
    <td>bug one</td>
    <td>Sean Chen</td>
    <td>major</td>
  </tr>
  ...
<tbody>
</tbody>
<tfoot>
  <th>ID</th>
  <th>Summary</th>
  <th>Owner</th>
  <th>Priority</th>
</tfoot>

We could load the DataTable by simply using the following JavaScript code:

<script type="text/javascript" charset="utf-8">
<!--
jQuery(document).ready(function() {
    jQuery('#tickets').dataTable( {
        "bProcessing": true,
        // not using server side processiong
        "bServerSide": false,
        // trun off the length change drop down.
        "bLengthChange" : true,
        // define the length memn option
        "aLengthMenu" : [[15, 25, 50, -1], [15, 25, 50, "All"]],
        // turn off filter.
        "bFilter" : true,
        // turn off sorting.
        "bSort" : true,
        // items per page.
        "iDisplayLength" : 15,
        "sPaginationType": "full_numbers",
        "aoColumns" : [
            {"bSortable":false},
            {"bSortable":false},
            {"bSortable":true},
            {"bSortable":true},
            {"bSortable":true},
        ]
    } );
} );
-->
</script>

References

• jQuery DataTable on GitHub
• documents and samples about DataTables