Dynamic data table from external json feed

First of all, while I'm fairly comfortable with code, I'm also quite new to Wordpress development, JS, and PHP so please forgive me if this is not explained very well, or a real rookie-type question.

I'd like to add the data from this JSON feed: http://ebird.org/ws1.1/data/obs/geo/recent?lng=-112.53lat=53.38dist=10back=30maxResults=500locale=en_USfmt=json (documentation by searching for "eBird API 1.1" ) into a table with "Common Name" "How Many" "Date" and "Location Name" columns. I'd also love to be able to "fancy the table up" with jquery dataTables, so that people could sort/search/paginate.

I have two stretch goals as well: 1. to have the location name link to a google map of the lat/lng supplied in the json feed e.g. something like: tda href="http://maps.google.ca/maps?f=ddaddr=' $data['lat'] ',' $data['lng'] 'z=8" target="_blank"'$data['locName']'/atd'

and 2. it would be really awesome to have people be able to select distance and date values from drop-down lists to load different results from the json feed (e.g. dist=10/25/50 and back=7/14/30).

The page I'm working on is currently at http://djmdesign.ca/bbo/updates/sightings/ but will get moved over to beaverhillbirds.com/updates/sightings/. I've been trying, unsuccesfully, to get plugins to do this for me (I currently have a static table showing a rough idea of the desired result), and also have some scratchwork at beaverhillbirds.com/jsonfeed.html and jsonfeed2.html.

Any, and all, pointers/suggestions/wisdom/code would be very much appreciated!