Google sheet Apps Script Webapp DataTable Load bảng dữ liệu từ Sheet lên Web ver 2024
Google sheet Apps Script Webapp DataTable Load bảng dữ liệu từ Sheet lên Web ver 2024. Đối với phiên bản này được thêm một số chức năng: tìm kiếm, xuất file excel, print, copy data. Giao diện đẹp mắt, hiện đại. Bạn có thể xem phần code tham khảo và video hướng dẫn bên dưới.
Xem thêm các project excel khác:
- Google sheet apps script | Scan QR code – Filter and get data table display on webapp
- Google sheet apps script Filter to get data to display on webapp, fill background color for data row
- Google sheet Apps script Webapp | Project Quản lý đơn hàng – Cập nhật sản phẩm – In phiếu kiểm soát
- Google sheet Apps script Webapp | Tạo QR Code động – Tự động load mã QR mới khi nội dung mã hóa đổi
- Googlesheet Apps script Webapp | Tạo trang trắc nghiệm online như Quiz
- Google sheet Apps script | Trang trắc nghiệm Quiz – Cập nhật câu hỏi, trả lời, thời gian đếm ngược
- Google sheets | Number to text, Hàm đọc số thành chữ Ứng dụng taoh hóa đơn, phiếu chi.
- Googlesheet Apps script Webapp | Tạo mã QR Code từ nội dung nhập vào – QR Code Generator
- Google sheet apps script | Dropdown đơn giản lấy dữ liệu từ google sheet – Simple dropdown
- Apps script Webapp CSS – HTML – JS | Tạo ứng dụng Ghi chú trên nền tảng webapp – website
Mã app script “Code.gs”
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getData(){
let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data')
let data = ss.getDataRange().getDisplayValues()
Logger.log(data)
let headers = data.shift()
Logger.log(headers)
return {data:data, headers:headers}
}
Mã appscript “index.html”
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/r-2.5.0/datatables.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/r-2.5.0/datatables.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Tahoma&display-swap');
* {
font-family: 'Tahoma', sans-serif;
}
.centered{
text-align: center !important;
vertical-align: middle !important;
}
.table-Orange{--bs-table-color:#000;--bs-table-bg:#ffc107;--bs-table-border-color:#373b3e;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#000;--bs-table-active-bg:#373b3e;--bs-table-active-color:#000;--bs-table-hover-bg:#323539;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}
</style>
</head>
<body>
<div class="container mt-3">
<table id="example" class="table table-striped nowrap centered" style="width:100%">
<thead class="table-Orange"></thead>
</table>
</div>
<script>
window.addEventListener('DOMContentLoaded',()=>{
google.script.run.withSuccessHandler(showTable).getData()
})
function showTable(res){
const dataSet = res.data
const headers = res.headers.map(header => {
return {title:header}
})
new DataTable('#example', {
columns: headers,
data: dataSet,
responsive: true,
columnDefs:[
{className: 'centered',targets:[0,1,2,3]},
{target: 3,
render:(data)=>{
return '<a href="'+data+'" target="_blank"><img src="https://lh3.googleusercontent.com/pw/AP1GczM1ByV_2J94PPIiwcQ7wC2TzoliEMXTwqyOBZ391PLHyhMu2_pFMZFNeQ96G_OuCcmkCalznkdDjl7D3pl0ZaK4W8SZCk2dog3DTpvxpiGNxO-bXxyHTw8XU5i7MO5iK-pj4aZN_FplDBXUwPzzkOe3=w641-h633-s-no-gm?authuser=0" width="20px"></a>'
}
}
],
dom: 'lBfrtip',
buttons:[{extend:'copy',className:'btn-sucess'},
{extend:'excel',className:'btn-danger'},
{extend:'csv',className:'btn-warning'},
{extend:'print',className:'btn-info'},
]
})
}
</script>
</body>
</html>