Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making HTML Tables Interactive

23,750 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.

  • Be the first to comment

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!

×