Tampa Web Design & Development

Posts Tagged ‘tips’

DataTables & jQuery UI Themes
Posted: 02.15.2010

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
How to help your Web Designer/Developer help you
Posted: 05.09.2009

The hardest part of any project is bringing all of the involved parties together, getting them all on the same page and properly setting everyone’s expectations. If your web designer/developer knows exactly what your expectations are from the start, the faster and better he can meet them. This is accomplished with a bit of homework, ideally before even talking to any design firm. We’ve compiled a few tips to help you make your experience a bit smoother and also deliver a better end result.


1) Be prepared: Before starting any project, a client should take the time to prepare as much information as possible and build a requirements document. This is a detailed outline of what will be accomplished with the website/application and what is required. You should also list any features or must-have items you want to include, once again, with as much detail as possible. When drawing up this document, pretend you will be submitting it to a complete stranger. Would they be able to only read this document and fully understand what you’re trying to accomplish? It might sound like a lot of work to some but it will only help to save time and headaches both when asking for a quote and when the project actually begins. You’ll never hear a designer or developer complain about having too much information. This also relates to out next point…


2) Be specific: No one knows your business better than you. And because of this, you can’t assume that you’re web designer has the same understanding of your company as you. Being open and offering as much information as possible will help the designer deliver the best product possible. Email is a common communication tool in this business, so when replying, try to be as descriptive as possible. This will help to prevent mis-understandings and will also save time because it will help prevent follow-up clarification emails. This makes the entire design/development process much more efficient and faster.


3) Be open to ideas: Sometimes the best ideas and intentions just won’t translate right onto the web. A good designer/developer should have the confidence and knowledge to tell a customer when they think something isn’t a good idea. A good designer/developer should also be able to suggest a better way to accomplish the same task, so make sure you’re open to ideas and suggestions.


4) Be available: In this business, the two biggest challenges are information and communication. Throughout the project, the client will constantly be asked to provide approval or further clarification of something. If a client fails to respond in a timely fashion, this can quickly take it’s toll on a projects time line. Sadly, this is a very common problem in this industry. It is commonly preferred to do most communication through email for both accountability and reference. Most firms have multiple clients so it’s much easier to reference an email while working on a particular project. With this in mind, it is recommend that the client should try to check their email more often then normal, just to prevent any delays and keep the process moving along nicely.