DataTables / Google spreadsheet integration
by dixalex
JavaScript
<script type='text/javascript'>
$(document).ready(function() {
// Google Apps Script Web App URL
var scriptUrl = "https://script.google.com/macros/s/AKfycbwiGdAAMNVh6XlcDgU5lQ_9VA2WpCKD61RzVwEZGL7i9ovWvUj8a-n4xsNOz0p2VqfB/exec";
// Load the jquery.dataTables.min.js script dynamically
$.getScript("https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js", function() {
// The jquery.dataTables.min.js script has loaded successfully
// Load the dataTables.responsive.min.js script dynamically
$.getScript("https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js", function() {
// Both scripts have loaded successfully
// Make AJAX request to retrieve data from Google Apps Script Web App
$.ajax({
url: scriptUrl,
dataType: "json",
success: function(data) {
if (data && data.jsonData && data.jsonData.length > 0) {
// Display the specific cell content as an <h1> header
$('#specificCellTitle').text(data.specificCellTitle.toLowerCase().replace(/\b\w/g, function(char) {
return char.toUpperCase();
}));
// Display the specific cell content as an <h2> header
var dateObj = new Date(data.specificCellDate);
var formattedDate = (dateObj.getMonth() + 1) + '/' + dateObj.getDate() + '/' + dateObj.getFullYear();
$('#specificCellDate').text(formattedDate);
// Extract column headers from the first row of the JSON data
var headers = Object.keys(data.jsonData[0]);
var headerRow = $("<tr></tr>");
headers.forEach(function(header) {
headerRow.append("<th>" + header + "</th>");
});
$("#example...