Make your HTML Tables beautiful with DataTables

While developing a data-rich booking site for a client, I wanted an easy and quick way to paginate 10 items at a time in a table using javascript. While looking at different solutions, none of which were ideal, I came across a jQuery plugin that was even more powerful and simpler to set up that I could have ever imagined – DataTables.

DataTables is very powerful jQuery plugin which offer a lot of features. For example, you can have on-the-fly filtering, ajax auto-loading of data, pagination, sorting columns, highlight sorted columns, extensive plug-in support, themes using CSS or jQuery UI ThemeRoller and the plugin has excellent documentation.

So how do you install DataTables?
Downloading the latest code for the plugin from DataTables.
Include the jQuery and DataTables js files in the header of your html code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" language="javascript" src="/media/js/jquery.dataTables.js"></script>

Then add the CSS for the plugin:

<style type="text/css" title="currentStyle">
			@import "/release-datatables/media/css/demo_page.css";
			@import "/release-datatables/media/css/demo_table.css";
</style>

Give your table the class “display” and and an id of your choice:

<table class="display" id="myTable">

Then initiate the plugin with the following code:

<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
     oTable = $('#myTable').dataTable({
         "bJQueryUI": true,
         "sPaginationType": "full_numbers"
     });
} );
</script>

A word of warning, make sure your table is properly formatted with table head etc:

<table id="myTable" class="display">
   <thead>
      <tr>
          <th>Name</th>
          <th>Age</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>Tom</td>
          <td>29</td>
      </tr>
      <tr>
          <td>James</td>
          <td>30</td>
      </tr>
      <tr>
          <td>Lucy</td>
          <td>28</td>
      </tr>
   </tbody>
</table>