Use Tabletop.js to pull json from Google Spreadsheet and feed it to the DataTables jQuery plugin.
Demo by Chris Essig & Chris Keller made possible thanks to the Open Source work of Built By Balance & Allan Jardine.
- Demo Page
- Repo
- ReadMe
- Lisa Williams' Absurdly Illustrated Guide to Sortable, Searchable Online Data Tables
If interested in an enhanced version that allows you to choose between using a flat JSON file or tabletop.js to pull data from a Google spreadsheet, here's a draft version.
Step 1 - Prepare Google Spreadsheet data.
Step 2 - Add your spreadsheet key as an argument to the initializeTabletopObject function that is fired on document ready.
initializeTabletopObject('0An8W63YKWOsxdHVreXpLbVRWUGlJUlcweHVfZ01ycVE');
Step 3 - Set up your DataTables column headers in by adjusting the array in the createTableColumns() function. You'll be changing the value for both the mDataProp and sTitle keys.
var tableColumns = [
{'mDataProp': 'brewery', 'sTitle': 'Brewery', 'sClass': 'center'},
{'mDataProp': 'city', 'sTitle': 'City', 'sClass': 'center'},
{'mDataProp': 'website', 'sTitle': 'Website', 'sClass': 'center'}
];
Step 4 - Push the data to the table in tabletop_feed.js. I am creating a table with an id of data-table-container in the #demo div. I am then writing the datatable to that data-table-container div.
// create the table container and object
function writeTableWith(dataSource){
jqueryNoConflict('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered table-striped" id="data-table-container"></table>');
var oTable = jqueryNoConflict('#data-table-container').dataTable({
'aaData': dataSource,
'aoColumns': createTableColumns()
});
};