Tampa Web Design & Development

DataTables & jQuery UI Themes

We build a lot of data driven web applications and we are always working with tabular data. I am not a big fan of styling tables, but with DataTables and jQuery UI themes this is a piece of cake. I will show you how you can make a beautiful table in just a few minutes. First you will need to download DataTables. Unzip the download and grab the DataTables.js and jquery.js files and put them in your public_html folder or htdocs folder for the site you want to implement DataTables on. Then we want to include those two files in the head of our HTML document as seen below. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>DataTables Demo</title>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="jquery.dataTables.js"></script>
	</head>
Next we will build a simple table for this demo. 
	<body>
		<table id="users" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>ID</th>
					<th>User</th>
					<th>Date</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Bob</td>
					<td>1/24/10</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Dave</td>
					<td>2/15/10</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Chris</td>
					<td>2/22/10</td>
				</tr>
			</tbody>		
		</table>
	</body>
Note that we use the thead and tbody tags in the table, this is essential to make DataTables work properly with our table.
Then we will add a bit of css to our stylesheet. 
#users {
	width: 400px;
	text-align: center;
}
You should now have a table that looks like this.



Next we will go over to the jQuery UI site and download one of the pre-made themes or roll your own using the theme roller. You can download all the pre-made themes using this link jquery-ui-themes-1.7.2.0.zip. Now lets unzip the downloaded themes zip file and grab the images folder, the jquery-ui.css file, and the ui.theme.css file from the theme you want to use and copy these to your public_html folder or htdocs folder. Then we want to include the jquery-ui.css file and the ui.theme.css file in the head of our HTML document as seen below. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>DataTables Demo</title>
                <link type="text/css" rel="stylesheet" href="jquery-ui.css" />
                <link type="text/css" rel="stylesheet" href="ui.theme.css" />
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="jquery.dataTables.js"></script>
	</head>
Make sure you include the jquery-ui.css file and the ui.theme.css file before the main css file for your site. This will enable you to be able to override the styling of the jquery-ui.css file and the ui.theme.css file without modifying them allowing you to easily switch themes in the future. Now all we have to do is implement the script to add DataTables to our table. 
<script type="text/javascript">
    $(document).ready(function(){
        $("#users").dataTable({"bJQueryUI": true});
    })
</script>
The above code implements DataTables on the table and the bJQueryUI option adds all the necessary classes to our table to work with the jQuery UI CSS framework. Next we need to specify a width for DataTables wrapper. DataTables automatically adds a wrapper with the id from the table and wrapper prefixed with an underscore as you can see below. 
/* Wrapper created by DataTables */
#users_wrapper {
	width: 400px;
}
You should now have a table that looks similar to this depending on what theme you choose. (I used the vader theme for this demo)



Now we just need to add some styling to position the elements added by DataTables. They add ids to all the elements for easy styling. You can inspect the elements you want to position with FireBug to get the ids, or refer to the styling documentation on the DataTables website. In the main stylesheet for our site lets add the following. 
/* Show # of entries element created by DataTables */
#users_length {
	float: left;
	padding: 5px;
}
 
/* Search element created by DataTables */
#users_filter {
	float: right;
	padding: 5px;
}
 
/* Table information element created by DataTables */
#users_info {
	float: left;
	padding: 5px;
}
 
/* Pagination element created by DataTables */
#users_paginate {
	float: right;
	padding: 5px;
}
 
/* Pagination previous element created by DataTables */
#users_previous {
	float: left;
}
 
/* Pagination next element created by DataTables */
#users_next {
	float: right;
}
 
/* Sorting arrows class created by DataTables */
#users .css_right {
	float: right;
}
 
/* Even row class created by DataTables */
#users .even {
	background: #999;
}
You should now have an awesome looking table like this.



Here are the files used in the demo. dataTables_jQuery-UI_demo

Tags: , , , , , ,

This entry was posted on Monday, February 15th, 2010 at 1:00 pm and is filed under Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

One Reply to “DataTables & jQuery UI Themes”

  1. Allan Jardine

    February 15th, 2010 at 4:03 pm

    Nice write up – thanks! It’s worth pointing out that in DataTables you have the option to tell it to include duplicate table control fields (for example a filter at the top and the bottom of the table) – so styling is best done by class names rather than id (to keep it generic). :-)
    Allan

Leave a Reply