Making HTML Tables Interactive

22,532 views

Published on

Help users navigate your table of static data to find the record they're looking for -- and sort by what matters to them.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
22,532
On SlideShare
0
From Embeds
0
Number of Embeds
7,249
Actions
Shares
0
Downloads
46
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Making HTML Tables Interactive

  1. 1. Making HTML Tables Interactive Michelle Minkoff, Data Producer, PBSNews.org Lightning Talks: NICAR 2011
  2. 2. What are we talking about? <ul><li>We push for openness of public data, so turnabout’s fair play, let’s make our own data more open </li></ul><ul><li>Posting data online as static HTML is good…, but… </li></ul><ul><li>People like to CLICK (just think of how much fun popping bubble wrap is!) </li></ul><ul><li>Srsly, searchabale dbs imp so I can find the data pt that matters to me </li></ul><ul><li>Skip the usual pattern of query>results>details </li></ul>
  3. 3. It shouldn’t be this hard! <ul><li>But searchable databases require a good amount of back end and front end work. </li></ul><ul><li>Detail pages are great for organizing many pieces of info </li></ul><ul><li>If we just want people to literally find their record, you may not need a db back end </li></ul><ul><li>You can do this within your CMS, if it allows Javascript </li></ul>
  4. 4. Get your table ready <ul><li>You’ll need a static HTML table </li></ul><ul><li>That looks like: </li></ul>
  5. 5. Double check that table <ul><li>Make sure you: </li></ul><ul><ul><li>Have a <thead> and <tbody> section of that table </li></ul></ul><ul><ul><li>Have end tags for all beginning tags (no <tr> with no </tr>) </li></ul></ul><ul><ul><li>Give your table an id </li></ul></ul><ul><li>You can use a Google spreadsheet to generate this HTML table if you like </li></ul><ul><li>Another quick way to make HTML table is Tableizer: http://tableizer.journalistopia.com/ </li></ul>
  6. 6. Add the secret sauce: DataTables <ul><li>Not the only option – Tablesorter is popular </li></ul><ul><ul><li>I find this one more intuitive </li></ul></ul><ul><li>Used this on a few LAT projects , and also now on some to-come pieces at PBSNews.org </li></ul><ul><li>Go to the code! </li></ul>
  7. 7. Include needed libraries
  8. 8. Make the table pretty
  9. 9. Allow numeric sorting
  10. 10. Making the table interactive
  11. 11. Looking at a finished project <ul><li>How did we implement all this at LAT? </li></ul>
  12. 12. Other stuff you should know <ul><li>Don’t do this with more than 1,000 records, or your site is likely to crash/be obnoxiously slow </li></ul><ul><li>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. </li></ul><ul><li>Searching tables only kicks in after typing two letters. </li></ul>
  13. 13. Full walkthrough at: bit.ly/nicar11datatables Have fun!

×