Home ›

At the Forge - jQuery Plugins

Issue 179

From Issue #179
March 2009

Mar 01, 2009  By Reuven M. Lerner
 in
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.

Listing 1. table.html


<html>
 <head>
  <title>Testing tables</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.dataTables.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
        $('#people-table').dataTable();
      });
  </script>
 </head>

 <body>
  <h1>Testing tables</h1>
  <table id="people-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
        <th>City</th>
        <th>Balance</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Lerner</td>
        <td>Reuven</td>
        <td>Modi'in</td>
        <td>100</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Barack</td>
        <td>Obama</td>
        <td>Washington</td>
        <td>750000000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Bush</td>
        <td>George</td>
        <td>Dallas</td>
        <td>-1000000000</td>
      </tr>
    </tbody>
  </table>
 </body>
</html>

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
Submitted by Face blogger (not verified) on Mon, 09/21/2009 - 01:22.

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
Submitted by Anonymous (not verified) on Wed, 06/17/2009 - 19:04.

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

White Paper
More Resources
Fabric-Based Computing Enables Optimized Hyperscale Data Centers

Today’s modular x86 servers are compute-centric, designed as a least common denominator to support a wide range of IT workloads. Those generic, virtualized IT workloads have much different resource optimization requirements than hyperscale and cloud applications. They have resulted in a “one size fits all” enterprise IT architecture that is not optimized for a specific set of IT workloads, and especially not emerging hyperscale workloads, such as web applications, big data, and object storage. In this report, you will learn how shifting the focus from traditional compute-centric IT architectures to an innovative disaggregated fabric-based architecture can optimize and scale your data center.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions