Last active
October 17, 2018 16:23
-
-
Save stvrbbns/0636b04d037d5cbfa72c to your computer and use it in GitHub Desktop.
example jQuery Tabletop.js page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="UTF-8"> | |
| <title>Page Title</title> | |
| <meta name="description" content="A description of the webpage."> | |
| <!-- ***** INCLUDED RESOURCES ***** --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" media="all" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.structure.min.css" media="all" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.theme.min.css" media="all" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" media="all" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.structure.min.css" media="all" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css" media="all" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> | |
| <!-- jQuery, jQueryUI, and jQuery-Mobile are also available from/on Google's CDN. | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" media="all"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> | |
| <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" media="all"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> | |
| --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" media="all" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables_themeroller.css" media="all" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script> | |
| <!-- DataTables for jQuery also has its own CDN. | |
| <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" media="all"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> | |
| --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.4.2/tabletop.min.js"></script> <!-- https://github.com/jsoma/tabletop --> | |
| <!-- ***** LOCAL CSS STYLING FOR THIS PAGE ***** --> | |
| <style> | |
| /* make it pretty */ | |
| </style> | |
| <!-- ***** LOCAL JAVASCRIPT INTERACTIVITY FOR THIS PAGE ***** --> | |
| <script> | |
| var public_spreadsheet_url = '1gJz0oT3pwwzzzKms2dowzyENqFiuNZ1S7U99mggyAMQ'; | |
| var tabletop, columns, rows; | |
| function populate_table_from_spreadsheet(tabletop) { | |
| columns = tabletop.models[tabletop.model_names[0]].column_names; | |
| rows = tabletop.data(); | |
| var $head_tr = $('<tr>'); | |
| $.each(columns, function(i, item_column_name) { | |
| //console.log(item_column_name); | |
| $head_tr.append( | |
| $('<td>').text(item_column_name) | |
| ); | |
| }); | |
| $head_tr.appendTo('#spreadsheet-table-header'); | |
| $.each(rows, function(i, item_data_row) { | |
| console.log(item_data_row); | |
| var $body_tr = $('<tr>'); | |
| $.each(columns, function(i, item_column_name) { | |
| console.log(item_data_row[item_column_name]); | |
| $body_tr.append( | |
| $('<td>').text(item_data_row[item_column_name]) | |
| ); | |
| }); | |
| $body_tr.appendTo('#spreadsheet-table-body'); | |
| }); | |
| }; | |
| $(document).ready(function(){ | |
| // Get Google Spreadsheet as JSON | |
| tabletop = Tabletop.init( { | |
| key: public_spreadsheet_url, | |
| callback: function(data, tabletop) { | |
| //console.log(data); | |
| populate_table_from_spreadsheet(tabletop); | |
| }, | |
| simpleSheet: true } | |
| ); // add "debug: true" to Tabletop.init({}) to help diagnose problems. | |
| }); | |
| </script> | |
| <!-- ***** ACTUAL HTML MARKUP AND CONTENT FOR THIS PAGE ***** --> | |
| <body> | |
| <h1>Page Title</h1> | |
| <p>Information: | |
| <br/>Google Spreadsheet Link/URL: <a href="https://docs.google.com/spreadsheets/d/1gJz0oT3pwwzzzKms2dowzyENqFiuNZ1S7U99mggyAMQ/edit?usp=sharing">https://docs.google.com/spreadsheets/d/1gJz0oT3pwwzzzKms2dowzyENqFiuNZ1S7U99mggyAMQ/edit?usp=sharing</a> | |
| <br/>Comma-Separated Value (CSV) Link/URL: <a href="https://docs.google.com/spreadsheets/d/1gJz0oT3pwwzzzKms2dowzyENqFiuNZ1S7U99mggyAMQ/pub?output=csv">https://docs.google.com/spreadsheets/d/1gJz0oT3pwwzzzKms2dowzyENqFiuNZ1S7U99mggyAMQ/pub?output=csv</a> | |
| <br/>Google Document Key: 1gJz0oT3pwwzzzKms2dowzyENqFiuNZ1S7U99mggyAMQ | |
| </p> | |
| <table id="spreadsheet-table"> | |
| <thead id="spreadsheet-table-header"></thead> | |
| <tbody id="spreadsheet-table-body"></tbody> | |
| </table> | |
| <br/> | |
| <p>Notes: | |
| <br/>Google session expirations might cause problems | |
| <br/>empty spreadsheets and empty rows can cause problems | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment