Making HTML Tables Making HTML Tables InteractiveInteractiveMichelle Minkoff, Data Producer, PBSNews.orgMichelle Minkoff, Data Producer, PBSNews.orgLightning Talks: NICAR 2011Lightning Talks: NICAR 2011

What are we talking What are we talking about?about?

We push for openness of public data, so We push for openness of public data, so turnabout’s fair play, let’s make our own data turnabout’s fair play, let’s make our own data more openmore open

Posting data online as static HTML is good…, but…Posting data online as static HTML is good…, but… People like to CLICK (just think of how much fun People like to CLICK (just think of how much fun

popping bubble wrap is!)popping bubble wrap is!) Srsly, searchabale dbs imp so I can find the data Srsly, searchabale dbs imp so I can find the data

pt that matters to mept that matters to me Skip the usual pattern of query>results>detailsSkip the usual pattern of query>results>details

It shouldn’t be this It shouldn’t be this hard!hard!

But searchable databases require a good But searchable databases require a good amount of back end and front end work. amount of back end and front end work.

Detail pages are great for organizing many Detail pages are great for organizing many pieces of infopieces of info

If we just want people to literally find their If we just want people to literally find their record, you may not need a db back endrecord, you may not need a db back end

You can do this within your CMS, if it allows You can do this within your CMS, if it allows JavascriptJavascript

Get your table readyGet your table ready

You’ll need a static HTML tableYou’ll need a static HTML tableThat looks like:That looks like:

Double check that tableDouble check that table

Make sure you:Make sure you: Have a <thead> and <tbody> section of that Have a <thead> and <tbody> section of that

tabletable Have end tags for all beginning tags (no <tr> Have end tags for all beginning tags (no <tr>

with no </tr>)with no </tr>) Give your table an idGive your table an id

You can use a Google spreadsheet to generate You can use a Google spreadsheet to generate this HTML table if you likethis HTML table if you like

Another quick way to make HTML table is Another quick way to make HTML table is Tableizer: http://tableizer.journalistopia.com/Tableizer: http://tableizer.journalistopia.com/

Add the secret sauce: Add the secret sauce: DataTablesDataTables

Not the only option – Tablesorter is popularNot the only option – Tablesorter is popular I find this one more intuitiveI find this one more intuitive

Used this on a few LAT projects, and also now Used this on a few LAT projects, and also now on some to-come pieces at PBSNews.orgon some to-come pieces at PBSNews.org

Go to the code!Go to the code!

Include needed librariesInclude needed libraries

Make the table prettyMake the table pretty

Allow numeric sortingAllow numeric sorting

Making the table Making the table interactiveinteractive

Looking at a finished Looking at a finished projectproject

How did we implement all this at LAT?How did we implement all this at LAT?

Other stuff you should Other stuff you should knowknow

Don’t do this with more than 1,000 records, Don’t do this with more than 1,000 records, or your site is likely to crash/be obnoxiously or your site is likely to crash/be obnoxiously slowslow

If you’re not sorting by formatted numbers, or If you’re not sorting by formatted numbers, or straight text (maybe you’re using a checkbox straight text (maybe you’re using a checkbox to sort on), you may need to write your own to sort on), you may need to write your own sort. DataTables docs will help.sort. DataTables docs will help.

Searching tables only kicks in after typing two Searching tables only kicks in after typing two letters.letters.

Full walkthrough at: bit.ly/nicar11datatables

Have fun!