Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
css
images
scripts
README.md
index.html
tabletop_to_datatables.zip

README.md

Demo: tabletop to datatables

Scott Pham has created a version of this project that uses the latest version of DataTables and removes a lot of deprecated code.


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.

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()
        });
    };

Links & Resources

You can’t perform that action at this time.