Last active
September 8, 2024 15:07
-
-
Save bpwebs/eddd337abde5e11758d9aa46cd2e4dde to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| #Display Google Sheets data on a website using Google Apps Script and JQuery DataTables |
This file contains hidden or 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> | |
| <head> | |
| <title>Price List</title> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"/> | |
| </head> | |
| <body style="padding: 20px 40px;"> | |
| <h1>Pizza Price List</h1> | |
| <table id="example" class="display" style="width:100%"> | |
| <thead> | |
| <tr> | |
| <th>Pizza Name</th> | |
| <th>Type</th> | |
| <th>Size</th> | |
| <th>Price</th> | |
| <!-- Add more columns as needed based on your JSON structure--> | |
| </tr> | |
| </thead> | |
| </table> | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> | |
| <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> | |
| <script> | |
| new DataTable('#example', { | |
| ajax: 'https://script.google.com/macros/s/AKfycbxJBAgeV78_4B1d-ektMWO2sZzA6JEUXgAcuchaDnXUABIb9264dVc9XI_qJLAsvjRyqw/exec', | |
| columns: [ | |
| { data: 'Pizza Name' }, | |
| { data: 'Type' }, | |
| { data: 'Size' }, | |
| { data: 'Price' } | |
| ] | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Visit the blog post at https://www.bpwebs.com/how-to-display-google-sheets-data-on-a-website/ for more details.