One of the reasons why I love the technology industry—and specifically the Internet subset of it—is that it is always changing, and usually changing very quickly. I love learning about new concepts and new ideas, and there is certainly always something new to learn about in the Internet development industry.
With jQuery, we can develop all kinds of solutions that improve the user’s experience, from improving form usability and validation, to more-engaging photo galleries, to a very fluid and dynamic browsing experience. And just as importantly, many times with jQuery we can build these new solutions more quickly and with less code than prior coding techniques. It’s the ultimate win-win: our clients get better-looking and better-functioning web sites without an increase in cost!
Today, I’d like to talk about one specific jQuery component that I have used on a recent project. It’s a plug-in named DataTables. From the DataTables web site, DataTables is:
Hmm. Maybe that definition doesn’t help us very much. To simplify, here’s my DataTables definition: DataTables gives programmers a set of tools when displaying a table of information that provides instantaneous pagination, sorting and searching. DataTables replaces the old, standard way of these three functionalities of having to send the request to the web server and wait for it to respond. An example:
1: While browsing records 1-10 of a table, you click a link to go to the next page, containing records 11-20.
2: The browser sends the request to go to the next page back to the web server.
3: The web server passes the request on to the database server.
4: The database server then works with the web server to get the data for the next page and sends it back to your browser. While this process is happening, your mouse becomes an hourglass while you wait for the page to load.
New way: When you click a link to go to the next page, the browser instantly updates with the next page’s information! You click the link, and the page updates.
Sorting and Searching provide similar experiences. Here’s an example of a table of information using DataTables:
|Browser||Operating System||Screen Resolution||% of Visits|
So, what you see here is a table of information showing browser statistics for visitors to sangereby.com during July 2010. As a small side-note, we are always reviewing browser statistics for audiences of our web sites to understand which browser and screen resolutions are relevant to our audience (again – it’s another principle of ever-changing trends in the Internet industry). Okay, let’s talk a little bit more about each feature:
Pagination: As already stated, the primary benefit of this pagination approach is its speed. It’s just blazing fast. But, almost as importantly, DataTables generates all of the pagination links and functionality automatically – we programmers do not have to develop custom code to generate the pagination. So, less code, faster development.
Sorting: Okay, you can already guess – it’s ultra-fast and minimizes code to write. Great! The sorting feature also packs some extra bells and whistles. Instead of coding only one primary column to make sortable, all columns are instantly sortable. In the header row, you get the wonderful icons and background-color indicating which column is currently sorted and whether it is sorted low-to-high or high-to-low. You can even sort on multiple columns, to further sort sub-sets of data (hold down SHIFT and click a second column heading).
Searching: Of course, the quickest way to find the information you’re looking for is to search for it, right? So, we have a search box. But, think of it as a high-powered search box, because it searches keystroke-by-keystroke. Go ahead, try it! Start typing in “M-a-c” to see all Macintosh users. The results filter with each keystroke – amazing!
As someone who loves to dig through data and find the information buried within, tools like this that improve a table’s functionality are just plain outstanding. I look forward to using it (and learning about and using other jQuery tools) on future projects! If you want to know more, or have other jQuery recommendations, let me know in the comments.