I'm guessing there's some easy way but I haven't stumbled on the right thread or tutorial for how to do it. Pointers are welcome, please!
Kirk
Code: Select all
<!DOCTYPE html>
<__html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTable Example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<__script__ src="https://code.jquery.com/jquery-3.6.0.min.js"></__script>
<__script__ type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></__script>
</head>
</__body>
<h1>My DataTable</h1>
<table id="myTable" class="display">
<thead>
<tr>
<!-- Headers will be dynamically filled -->
</tr>
</thead>
<tbody>
<!-- Data rows will be dynamically filled -->
</tbody>
</table>
<__script__>
$(document).ready(function() {
// AJAX request to fetch data
$.ajax({
url: 'YOUR_GOOGLE_APPS_SCRIPT_URL',
dataType: 'json',
success: function(data) {
// Create the table headers based on the first row (keys) in the data
var headers = Object.keys(data[0]);
headers.forEach(function(header) {
$('#myTable thead tr').append('<th>' + header + '</th>');
});
// Populate table rows
data.forEach(function(row) {
var rowData = '<tr>';
headers.forEach(function(header) {
rowData += '<td>' + row[header] + '</td>';
});
rowData += '</tr>';
$('#myTable tbody').append(rowData);
});
// Initialize DataTables
$('#myTable').DataTable();
}
});
});
</__script>
<__body>
</__html>