Making HTML Tables Interactive

Making HTML Tables Interactive Michelle Minkoff, Data Producer, PBSNews.org Lightning Talks: NICAR 2011

What are we talking about?
We push for openness of public data, so turnabout’s fair play, let’s make our own data more open
Posting data online as static HTML is good…, but…
People like to CLICK (just think of how much fun popping bubble wrap is!)
Srsly, searchabale dbs imp so I can find the data pt that matters to me
Skip the usual pattern of query>results>details

It shouldn’t be this hard!
But searchable databases require a good amount of back end and front end work.
Detail pages are great for organizing many pieces of info
If we just want people to literally find their record, you may not need a db back end
You can do this within your CMS, if it allows Javascript

Get your table ready
You’ll need a static HTML table
That looks like:

Double check that table
Make sure you:
Have a <thead> and <tbody> section of that table
Have end tags for all beginning tags (no <tr> with no </tr>)
Give your table an id
You can use a Google spreadsheet to generate this HTML table if you like
Another quick way to make HTML table is Tableizer: http://tableizer.journalistopia.com/

Add the secret sauce: DataTables
Not the only option – Tablesorter is popular
I find this one more intuitive
Used this on a few LAT projects , and also now on some to-come pieces at PBSNews.org
Go to the code!

Include needed libraries

Make the table pretty

Allow numeric sorting

Making the table interactive

Looking at a finished project
How did we implement all this at LAT?

Other stuff you should know
Don’t do this with more than 1,000 records, or your site is likely to crash/be obnoxiously slow
If you’re not sorting by formatted numbers, or straight text (maybe you’re using a checkbox to sort on), you may need to write your own sort. DataTables docs will help.
Searching tables only kicks in after typing two letters.

Full walkthrough at: bit.ly/nicar11datatables Have fun!

http://www.chryswu.com	1575
http://michelleminkoff.com	725
http://feeds.feedburner.com	7
http://translate.googleusercontent.com	3
http://webcache.googleusercontent.com	2
https://learnonline.nku.edu	1
http://businessjournalism.org	1

Making HTML Tables Interactive

by Michelle Minkoff on Feb 22, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 2,314

Statistics

Making HTML Tables Interactive — Presentation Transcript