DataTable All Sheets

0

DataTable All sheets แสดงทุกแผ่นงาน

Database ฐานข้อมูล



แสดงโค้ดตัวอย่าง

Code gs 

        
          function doGet() {
            return HtmlService.createTemplateFromFile('index')
              .evaluate()
              .setTitle('Examblog')
              .addMetaTag('viewport', 'width=device-width, initial-scale=1')
              .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
          }

          function getFormData() {
            const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
            const sheets = spreadsheet.getSheets();
            let allData = [];
            
            sheets.forEach(sheet => {
              const data = sheet.getDataRange().getDisplayValues();
              data.shift(); // ลบหัวตารางในแต่ละแผ่นงาน
              allData = allData.concat(data); // รวมข้อมูลจากทุกแผ่นงาน
            });
            
            return allData;
          }
แสดงโค้ดตัวอย่าง

Code index

        
          <!DOCTYPE html>
          <html>

          <head>
            <title>ข้อมูลนักเรียน</title>
            <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css2?family=Sarabun&display=swap" rel="stylesheet">
            <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
            <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
            <style>
              body {
                font-family: 'Sarabun', sans-serif;
                font-size: .875rem;
              }

              .loading-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                display: none;
              }

              .spinner {
                width: 3rem;
                height: 3rem;
                border: 0.5rem solid rgba(0, 0, 0, 0.1);
                border-top: 0.5rem solid #28a745;
                border-radius: 50%;
                animation: spin 1s linear infinite;
              }

              @keyframes spin {
                from {
                  transform: rotate(0deg);
                }

                to {
                  transform: rotate(360deg);
                }
              }
            </style>
          </head>

          <body>
            <div class="loading-overlay" id="loadingOverlay">
              <div class="spinner"></div>
            </div>

            <div class="container my-5">
              <h2 class="text-center mb-2">
                <i class="fas fa-user"></i> ข้อมูลนักเรียนโรงเรียนสามัคคีวิทยา
              </h2>
              <div class="mb-2">
                <table id="dataTable" class="display nowrap" style="width:100%">
                  <thead class="bg-success text-white">
                    <tr>
                      <th>รหัส</th>
                      <th>ชื่อ-สกุล</th>
                      <th>ชื่อเล่น</th>
                      <th>เบอร์โทร</th>
                      <th>ชั้น</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
              </div>
              <footer class="text-muted text-center my-3">
                <div class="copyright"></div>
              </footer>
            </div>

            <script>
              const loadingOverlay = document.getElementById('loadingOverlay');
              let dataTable;

              document.addEventListener('DOMContentLoaded', function () {
                loadingOverlay.style.display = 'flex'; 
                dataTable = $('#dataTable').DataTable({
                  dom: 'Bfrtip',
                  buttons: [
                    {
                      extend: 'excelHtml5',
                      text: '<i class="fas fa-file-excel"></i> Excel',
                      className: 'btn btn-success'
                    },
                    {
                      extend: 'print',
                      text: '<i class="fas fa-print"></i> Print',
                      className: 'btn btn-primary'
                    }
                  ],
                  language: {
                    url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/th.json"
                  }
                });
                loadTableData();
              });

              function loadTableData() {
                google.script.run.withSuccessHandler(data => {
                  dataTable.clear();
                  data.forEach(row => {
                    dataTable.row.add(row);
                  });
                  dataTable.order([0, 'asc']).draw(); 
                  loadingOverlay.style.display = 'none'; 
                }).getFormData();
              }
            </script>

            <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
            <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
            <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
            <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
          </body>

          </html>
{fullWidth}
Tags:

ติดต่อสอบถามปัญหาได้เลยครับ

แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า