Created
August 21, 2021 11:42
-
-
Save neno-tech/db916e605951cc3794892fdde0cbf43a to your computer and use it in GitHub Desktop.
โค้ดแสดงข้อมูลจากชีตด้วย Data Table เว็บบอร์ดใน Google Site
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
| function doGet() { | |
| return HtmlService.createTemplateFromFile('index').evaluate() | |
| .addMetaTag('viewport', 'width=device-width, initial-scale=1') | |
| .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); | |
| } | |
| function getData() { | |
| var spreadSheetId = "xxx"; //แก้ 1 | |
| var range = SpreadsheetApp.openById(spreadSheetId).getRange('A2:E')//แก้ 2 | |
| var values = range.getDisplayValues().filter(r=>r[0]!='') | |
| return values; | |
| } | |
| function include(filename) { | |
| return HtmlService.createHtmlOutputFromFile(filename) | |
| .getContent(); | |
| } |
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> | |
| <base target="_top"> | |
| <script src="https://code.jquery.com/jquery-3.5.1.js"></script> | |
| <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> | |
| <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script> | |
| <link rel="stylesheet" type="text/css" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"> | |
| <?!= include('javaScript'); ?> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <br> | |
| <table id="data-table" class="table table-striped table-hover table-bordered" style="width:100%"> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
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
| <script> | |
| google.script.run.withSuccessHandler(showData).getData(); | |
| function showData(dataArray){ | |
| $(document).ready(function(){ | |
| $('#data-table').DataTable({ | |
| data: dataArray, | |
| columns: [ | |
| {"title":"ประทับเวลา"}, | |
| {"title":"ชื่อ สกุล"}, | |
| {"title":"ชั้น"}, | |
| {"title":"คำถาม"}, | |
| {"title":"คำตอบ"} | |
| ] | |
| }); | |
| }); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment