Improving Tables of Data with jQuery: DataTables

8.27.2010 »
Tech
Stay up to Date

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.

One of the current fast-growing Internet trends is to push more control over functionality and animation to the client-side browser, now that newer browsers are powerful enough to run them natively. In simple terms, this gives us as designers and programmers more flexibility when coming up with creative solutions to problems. (Or, I could just say, we get to do more fun stuff!) One of the leaders of this trend is jQuery, which is a JavaScript library that is very powerful.

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:

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

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:

Old way:
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:

BrowserOperating SystemScreen Resolution% of Visits
Internet Explorer Windows 1024x768 11.0%
Internet Explorer Windows 1280x1024 7.0%
Internet Explorer Windows 1440x900 4.8%
Firefox Windows 1280x800 4.2%
Internet Explorer Windows 1280x800 4.2%
Firefox Macintosh 1680x1050 3.0%
Firefox Windows 1280x1024 2.9%
Firefox Windows 1680x1050 2.7%
Safari Macintosh 1920x1200 2.5%
Safari Macintosh 1440x900 2.5%
Firefox Windows 1024x768 2.3%
Internet Explorer Windows 1680x1050 2.3%
Firefox Macintosh 1440x900 2.0%
Safari Macintosh 1280x800 2.0%
Firefox Macintosh 1280x800 1.9%
Chrome Windows 1366x768 1.7%
Firefox Windows 1366x768 1.7%
Firefox Macintosh 1920x1200 1.5%
Internet Explorer Windows 1920x1080 1.5%
Safari Macintosh 2560x1440 1.5%
Safari Macintosh 1680x1050 1.5%
Chrome Windows 1440x900 1.3%
Firefox Windows 1440x900 1.3%
Safari iPhone 320x480 1.3%
Internet Explorer Windows 1152x864 1.2%
Firefox Windows 1600x1200 1.1%
Safari Macintosh 2560x1600 1.1%
Chrome Windows 1280x800 1.0%
Chrome Windows 1680x1050 1.0%
Firefox Windows 1920x1200 1.0%
Internet Explorer Windows 1920x1200 1.0%
Internet Explorer Windows 1366x768 1.0%
Chrome Windows 1024x768 0.9%
Firefox Windows 1920x1080 0.8%
Internet Explorer Windows 800x600 0.8%
Chrome Windows 1920x1080 0.7%
Chrome Windows 1280x1024 0.7%
Chrome Windows 1280x768 0.7%
Firefox Macintosh 2560x1440 0.7%
Safari iPad 768x1024 0.7%
Firefox Macintosh 1280x1024 0.6%
Firefox Windows 1152x864 0.6%
Internet Explorer Windows 1280x768 0.6%
Safari Macintosh 1280x854 0.6%
Safari Macintosh 1920x1080 0.6%
Chrome Macintosh 1440x900 0.4%
Chrome Macintosh 1280x800 0.4%
Firefox Windows 1600x900 0.4%
Internet Explorer Windows 1280x960 0.4%
Internet Explorer Windows 1600x900 0.4%
Safari Android 320x480 0.4%
Firefox Windows 1024x576 0.3%
Firefox Windows 1280x960 0.3%
Internet Explorer Windows 983x737 0.3%
Internet Explorer Windows 1080x810 0.3%
Internet Explorer Windows 1536x864 0.3%
Mozilla Linux 1280x1024 0.3%
Safari iPhone 320x396 0.3%
Chrome Windows 1360x768 0.2%
Chrome Windows 1920x1200 0.2%
Chrome Windows 1600x900 0.2%
Firefox Macintosh 1024x768 0.2%
Firefox Windows 800x600 0.2%
Firefox Windows 1024x600 0.2%
Firefox Windows 1280x720 0.2%
Internet Explorer Windows 1024x640 0.2%
Internet Explorer Windows 1344x840 0.2%
Internet Explorer Windows 1317x823 0.2%
Internet Explorer Windows 1024x819 0.2%
Internet Explorer Windows 731x549 0.2%
Internet Explorer Windows 1429x1143 0.2%
Internet Explorer Windows 1280x720 0.2%
Safari Android 480x800 0.2%
Safari Android 320x452 0.2%
Safari Macintosh 1024x768 0.2%
Safari Macintosh 1600x1024 0.2%
Safari Macintosh 1280x960 0.2%
Safari Macintosh 1600x1200 0.2%
Safari Macintosh 480x800 0.2%
Safari Windows 1024x768 0.2%
Safari iPod 320x396 0.2%
Chrome Macintosh 1280x1024 0.1%
Chrome Macintosh 1920x1200 0.1%
Chrome Macintosh 1680x1050 0.1%
Chrome Windows 1600x1200 0.1%
Chrome Windows 1024x600 0.1%
Firefox Linux 1440x900 0.1%
Firefox Linux 1024x600 0.1%
Firefox Macintosh 1152x870 0.1%
Firefox Macintosh 2560x1600 0.1%
Firefox Macintosh 1280x854 0.1%
Firefox Macintosh 1152x768 0.1%
Firefox Macintosh 1920x1080 0.1%
Firefox Windows 1600x1024 0.1%
Internet Explorer Windows 1311x737 0.1%
Internet Explorer Windows 819x614 0.1%
Internet Explorer Windows 1276x733 0.1%
Internet Explorer Windows 1214x910 0.1%
Internet Explorer Windows 1093x614 0.1%
Internet Explorer Windows 1676x943 0.1%
Internet Explorer Windows 1600x1200 0.1%
Internet Explorer Windows 2560x1024 0.1%
Internet Explorer Windows 1120x700 0.1%
Internet Explorer Windows 1619x910 0.1%
Internet Explorer Windows 894x524 0.1%
Internet Explorer Windows 1603x902 0.1%
Internet Explorer Windows 1024x600 0.1%
Konqueror Linux 1024x768 0.1%
Mozilla Windows 1280x800 0.1%
Opera Linux 1024x768 0.1%
Opera Windows 1920x1080 0.1%
Safari Android 800x1183 0.1%
Safari Android 1005x1487 0.1%
Safari Android 854x480 0.1%
Safari Android 480x854 0.1%
Safari Macintosh 1280x720 0.1%
Safari Macintosh 1280x1024 0.1%
Safari Macintosh 1152x864 0.1%
Safari Windows 1920x1200 0.1%
Safari iPod 320x480 0.1%

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.

Tags:

UXjQuery
Keep reading.
Load All
View More