At the Forge - jQuery Plugins

Learn how to use jQuery plugins, one of the secrets to this JavaScript library's success.
DataTables

HTML tables have been around for many years, and although they have gotten a bad reputation because of the way they were used and abused for layout purposes (even after the introduction of CSS), there are many times when a table is the best and most logical way to present data. If you are running an on-line store, for example, and you want to get a summary of recent orders, it makes sense to structure the data in a table.

One of the most common things users want to do with a table, once they see it, is sort the rows according to one particular column. To continue with our e-commerce example, perhaps they want to sort the list by order number. Or, perhaps they want to sort it by customer name, by price or by date.

It's not hard to do this kind of sorting on the server side. Set up the table headers to be clickable links, and when you get a request, you change the order of the rows before they are output. But, if the data already is in your browser, wouldn't it be nice to be able to sort the rows in JavaScript? This might not be the fastest possible way to execute such a sort, but given small enough data sets, it's acceptable for most purposes, and it gives the user a sense of desktop-like control and response.

One nice jQuery plugin I've found to do this is called DataTable, written by Allan Jardine (see Resources). DataTable takes an existing HTML table and makes it sortable by column, as well as searchable.

To get this to work, you need an HTML table. Listing 1 is an HTML file that will work just fine for these purposes, although you presumably will want to use DataTable with a dynamic Web application.

As you can see, Listing 1 contains a single table with an ID of people-table. The table is defined as you might expect for an HTML table, with one possible exception (unless you're extremely pedantic). The headers for the table are defined with a <thead> section, while the body is in a <tbody> section. These tags are optional according to the HTML standard, but they are mandatory if you want to use DataTable.

With the table in place, you now can add jQuery and the DataTable plugin. Unlike other sorts of plugins, there's nothing to install, except the JavaScript file itself. If you put jquery.js and dataTable.js in the same directory as the file (which is probably not a good idea on a production system), you can write:


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>

Now everything is ready, except one thing. You need to connect the DataTable plugin to your table. You do this by telling JavaScript that when the document is ready, you want to connect the two:

$(document).ready(function () {
        $('#people-table').dataTable();
    });

If you aren't familiar with jQuery already, you'll soon learn that this is a common idiom when using the library. Define a function that is triggered on $(document).ready and have that function execute and/or define a number of other items, each of which fires on a different tag, ID or class.

Once you connect DataTable to the table, you'll see that the headers are now clickable and force the table to be sorted, first in ascending and then in descending order. (The DataTable download includes icons and CSS appropriate for seeing the sort order.)

DataTable supports a large number of options, all of which are passed to the dataTable() function. For example, DataTable shows ten rows of the current table by default, but it lets you choose from 10, 25, 50 and 100 rows. If you prefer to see a different number, you can set the iDisplayLength property to a different default:

$(document).ready(function () {
        $('#people-table').dataTable({'iDisplayLength': 1});
    });

I recently have used DataTable in a few projects, and I've found it to be easy to use, stable and well documented. The biggest problems crop up when you have a large data set, but that's not unique to DataTable.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Previous Article on jQuery

Face blogger's picture

The previous article on jQuery is available here - Last month Linux Journal
http://www.linuxjournal.com/article/10335

errtheblog.com/posts/73-the-j

Anonymous's picture

errtheblog.com/posts/73-the-jskinny-on-jquery is a broken link, download something that can't be open

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState