How to grab Datatables data from a Google Spreadsheet

Hi there.

I banged my head against a wall for a day or two, but I figured out how to dynamically get data into a Datatables object from a google doc, and I figured I would share this info with you all while it's fresh.

1. Google Spreadsheet set up:

First row should contain column descriptors.
Spreadsheet should be published as an RSS feed in LIST mode. (you can make it auto-republish on update if you like).

[ HTML of demo sheet for reference:
https://spreadsheets0.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0Ah5i4flVQwqEdHVRU0ZFWnVDSjVIaXdyNjJQR2ZtbEE&single=true&gid=0&output=html ]

2. You'll get a URL that looks like this:

https://spreadsheets.google.com/feeds/list/0Ah5i4flVQwqEdHVRU0ZFWnVDSjVIaXdyNjJQR2ZtbEE/od6/public/basic?hl=en_US&alt=rss

Modify this URL by replacing

/public/basic?hl=en_US&alt=rss

with

 /public/values?alt=json 

Both the VALUES and ALT=JSON options are critically important in taking this feed and making it usable for datatables.

3. Initialize dataTables as follows:

	<script type="text/javascript" charset="utf-8"> 
			$(document).ready(function() {
				$('#example').dataTable( {
					"bServerSide":false,
					"bProcessing":true,
					"sAjaxDataProp": "feed.entry",
					"sAjaxSource": "https://spreadsheets.google.com/feeds/list/0Ah5i4flVQwqEdHVRU0ZFWnVDSjVIaXdyNjJQR2ZtbEE/od6/public/values?alt=json",
					"aoColumns": [					
						{ "mDataProp": "gsx$carmake.$t" },
						{ "mDataProp": "gsx$model.$t" },
						{ "mDataProp": "gsx$year.$t" },
								]
				} );
			} );
		</script> 

IMPORTANT: for some reason the code highlighting is adding an a tag around my Ajaxurl. Ignore this, just plant the URL there.

The important bits described:

"bServerSide":false,

Because we are simply grabbing the feed, no processing is happening at the server end besides spitting data back at us.

"sAjaxDataProp": "feed.entry",

This ensures we are using the correct data property, else it will default to aaData and that's no use with this feed.

"sAjaxSource": "https://spreadsheets.google.com/feeds/list/0Ah5i4flVQwqEdHVRU0ZFWnVDSjVIaXdyNjJQR2ZtbEE/od6/public/values?alt=json",

points us to the Google doc URL. Again, ignore the screwy a tag that is being autocreated by the forum.

"aoColumns": [					
						{ "mDataProp": "gsx$carmake.$t" },
						{ "mDataProp": "gsx$model.$t" },
						{ "mDataProp": "gsx$year.$t" },
								]

Grabs the correct pieces of data from the feed for use in datatables. the gsx$carmake, for example, is populated because carmake is the title of column1 in row1, these will be based on your spreadsheet and must be extracted from the json feed you will be be using.

The $gsxwhatever MUST terminate in .$t in order for the data to be grabbed correctly.

In the HTML section, initialize dataTables as per normal usage.

I hope this has been helpful to someone, somewhere.

-raza