Bom dia!!! Por favor estou com dificuldade par a exibir minha datatable nesse código
0 views
Skip to first unread message
Paulo Rorberto
11:22 AM (2 hours ago) 11:22 AM
to Google Apps Script Community
.gs
style.css
DataTable
princp.html
function doGet(request) {
return HtmlService.createTemplateFromFile('index').evaluate()
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
/** INCLUDE HTML PARTS, EG. JAVASCRIPT, CSS, OTHER HTML FILES */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function globalVariables() {
var varArray = {
spreadsheetId: '1lDUOYHK9wxiwpoYMXUgkUzjL_jhyWTjj0SZJ9LR2qyM', //** CHANGE !!!
dataRage: 'Data!A2:Z', //** CHANGE !!!
idRange: 'Data!A2:A', //** CHANGE !!!
lastCol: 'Z', //** CHANGE !!!
insertRange: 'Data!A1:Z1', //** CHANGE !!!
sheetID: '0' //** CHANGE !!!
};
return varArray;
}
/** PROCESS FORM */
function processForm(formObject) {
/**--Execute if form passes an ID and if is an existing ID */
if (formObject.RecId && checkID(formObject.RecId)) {
/**--Update Data */
updateData(getFormValues(formObject), globalVariables().spreadsheetId, getRangeByID(formObject.RecId));
} else {
/**--Execute if form does not pass an ID
**--Append Form Data */
appendData(getFormValues(formObject), globalVariables().spreadsheetId, globalVariables().insertRange);
}
// Return last 10 rows
return getLastTenRows();
}
var folder1 = DriveApp.getFolderById('183VxBWrJlq_l_LckGbTTPEmzy4hgyy0o');
var folder2 = DriveApp.getFolderById('1rfy85Jxm9DTRqMJQD1ia0rMvqLKn8fhB');
/** GET FORM VALUES AS AN ARRAY */
function getFormValues(formObject) {
var formattedDate = formatDate(new Date());
if (formObject.RecId && checkID(formObject.RecId)) {
if (formObject.myFile1 && formObject.myFile2.length > 0) {
var blob1 = formObject.myFile1;
var blob2 = formObject.myFile2;
var file1 = folder1.createFile(blob1);
var file2 = folder2.createFile(blob2);
file1 = file1.getUrl();
file2 = file2.getUrl();
}
var values = [[formObject.RecId.toString(),
formatDateWithTimeZone(new Date(formObject.transaksi)),
formObject.shipper,
formObject.kategori,
formObject.katego01,
formObject.katego02,
formObject.katego03,
formObject.katego04,
formatDateWithTimeZone(new Date(formObject.shipment)),
formObject.faktur,
formObject.consignee,
formObject.city,
formObject.koli,
formObject.kilo,
formObject.freight,
formObject.origin,
formObject.lintas,
formObject.bill,
formObject.payment,
formObject.katego05T,
formObject.katego06U,
formObject.af,
file1,
file2,
formObject.wc,
formObject.time]];
} else {
if (formObject.myFile1 && formObject.myFile2.length > 0) {
var blob1 = formObject.myFile1;
var blob2 = formObject.myFile2;
var file1 = folder1.createFile(blob1);
var file2 = folder2.createFile(blob2);
file1 = file1.getUrl();
file2 = file2.getUrl();
}
// Usar a função generateId para criar um novo ID
var values = [[generateId(),
formatDateWithTimeZone(new Date(formObject.transaksi)),
formObject.shipper,
formObject.kategori,
formObject.katego01,
formObject.katego02,
formObject.katego03,
formObject.katego04,
formatDateWithTimeZone(new Date(formObject.shipment)),
formObject.faktur,
formObject.consignee,
formObject.city,
formObject.koli,
formObject.kilo,
formObject.freight,
formObject.origin,
formObject.lintas,
formObject.bill,
formObject.payment,
formObject.katego05T,
formObject.katego06U,
formObject.af,
file1,
file2,
formObject.wc,
formObject.time]];
}
return values;
}
// Função para formatar a data no formato "dd/MM/YYYY"
function formatDate(inputDate) {
var date = new Date(inputDate);
var day = date.getDate();
var month = date.getMonth() + 1; // Os meses começam do zero, então adicionamos 1
var year = date.getFullYear();
// Formatar para "dd/MM/YYYY"
return (day < 10 ? '0' : '') + day + '/' + (month < 10 ? '0' : '') + month + '/' + year;
}
// Função para formatar a data com o fuso horário correto
function formatDateWithTimeZone(inputDate) {
var date = new Date(inputDate);
var day = date.getUTCDate();
var month = date.getUTCMonth() + 1; // Os meses começam do zero, então adicionamos 1
var year = date.getUTCFullYear();
// Formatar para "dd/MM/YYYY"
return (day < 10 ? '0' : '') + day + '/' + (month < 10 ? '0' : '') + month + '/' + year;
}
/**
## CURD FUNCTIONS ----------------------------------------------------------------------------------------
*/
/** CREATE/ APPEND DATA */
function appendData(values, spreadsheetId, range) {
var valueRange = Sheets.newRowData();
valueRange.values = values;
var appendRequest = Sheets.newAppendCellsRequest();
appendRequest.sheetID = spreadsheetId;
appendRequest.rows = valueRange;
var results = Sheets.Spreadsheets.Values.append(valueRange, spreadsheetId, range, {valueInputOption: "RAW"});
}
/** READ DATA */
function readData(spreadsheetId, range) {
var result = Sheets.Spreadsheets.Values.get(spreadsheetId, range);
return result.values;
}
/** UPDATE DATA */
function updateData(values, spreadsheetId, range) {
var valueRange = Sheets.newValueRange();
valueRange.values = values;
var result = Sheets.Spreadsheets.Values.update(valueRange, spreadsheetId, range, {
valueInputOption: "RAW"
});
}
/** DELETE DATA */
function deleteData(ID) {
var startIndex = getRowIndexByID(ID);
var deleteRange = {
"sheetId": globalVariables().sheetID,
"dimension": "ROWS",
"startIndex": startIndex,
"endIndex": startIndex + 1
};
var deleteRequest = [{"deleteDimension": {"range": deleteRange}}];
Sheets.Spreadsheets.batchUpdate({"requests": deleteRequest}, globalVariables().spreadsheetId);
return getLastTenRows(); // Return last 10 rows
}
/*
## HELPER FUNCTIONS FOR CRUD OPERATIONS --------------------------------------------------------------
*/
/* CHECK FOR EXISTING ID, RETURN BOOLEAN */
function checkID(ID) {
var idList = readData(globalVariables().spreadsheetId, globalVariables().idRange).reduce(function (a, b) { return a.concat(b); });
return idList.includes(ID);
}
/* GET DATA RANGE A1 NOTATION FOR GIVEN ID */
function getRangeByID(id) {
if (id) {
var idList = readData(globalVariables().spreadsheetId, globalVariables().idRange);
for (var i = 0; i < idList.length; i++) {
if (id == idList[i][0]) {
return 'Data!A' + (i + 2) + ':' + globalVariables().lastCol + (i + 2);
}
}
}
}
/* GET RECORD BY ID */
function getRecordById(id) {
if (id && checkID(id)) {
var result = readData(globalVariables().spreadsheetId, getRangeByID(id));
return result;
}
}
/* GET ROW NUMBER FOR GIVEN ID */
function getRowIndexByID(id) {
if (id) {
var idList = readData(globalVariables().spreadsheetId, globalVariables().idRange);
for (var i = 0; i < idList.length; i++) {
if (id == idList[i][0]) {
var rowIndex = parseInt(i + 1);
return rowIndex;
}
}
}
}
/* GET LAST TEN ROWS */
function getLastTenRows() {
var lastRow = readData(globalVariables().spreadsheetId, globalVariables().dataRage).length + 1;
if (lastRow <= 2000) {
var range = globalVariables().dataRage;
} else {
var range = 'Data!A' + (lastRow - 1999) + ':' + globalVariables().lastCol;
}
var lastTenRows = readData(globalVariables().spreadsheetId, range);
return lastTenRows;
}
/* GET ALL RECORDS */
function getAllData() {
var data = readData(globalVariables().spreadsheetId, globalVariables().dataRage);
return data;
}
/*
## OTHER HELPER FUNCTIONS ------------------------------------------------------------------------
*/
/* INCLUDE HTML PARTS, EG. JAVASCRIPT, CSS, OTHER HTML FILES */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function getSheetData() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data"); // Replace with your sheet name
var dataRange = sheet.getRange("A2:Z"); // Adjust the range as needed
var data = dataRange.getDisplayValues();
return data;
}
function updateRowData(rowIndex, updatedData, columnIndicesToUpdate) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Data");
// Supondo que rowIndex é o índice da linha que você deseja atualizar
for (var i = 0; i < columnIndicesToUpdate.length; i++) {
const columnIndexToUpdate = columnIndicesToUpdate[i];
const columnToUpdate = columnIndexToUpdate + 1; // Adicione 1 porque as colunas em planilhas são baseadas em 1
ws.getRange(rowIndex + 2, columnToUpdate).setValue(updatedData[i]);
}
}
/** GERAR NOVO ID NO FORMATO 'YYYY-7LE001' */
function generateId() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var lastRow = sheet.getLastRow();
var year = new Date().getFullYear();
if (lastRow > 1) {
var lastId = sheet.getRange(lastRow, 1).getValue();
var lastIdParts = lastId.split('-');
if (lastIdParts.length === 2) {
var lastCode = lastIdParts[1].substring(0, 3);
var lastNumber = parseInt(lastIdParts[1].substring(3));
var newNumber = lastNumber + 1;
// Gerar um novo código aleatório de três caracteres
var newCode = generateCode();
// Retornar o novo ID no formato 'YYYY-7LE001'
return year + '-' + newCode + newNumber.toString().padStart(3, '0');
}
}
// Caso não haja ID anterior válido, gerar um novo ID completo
return year + '-' + generateCode() + '001';
}
/** GERAR CÓDIGO ALEATÓRIO DE TRÊS CARACTERES */
function generateCode() {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var code = '';
for (var i = 0; i < 3; i++) {
var randomIndex = Math.floor(Math.random() * chars.length);
code += chars.charAt(randomIndex);
}
return code;
}
index.html<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site CPMC</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boot...@5.3.0-alpha2/dist/css/bootstrap.min.css">
<?!= HtmlService.createHtmlOutputFromFile('style.css').getContent() ?>
<!-- See JavaScript.html file -->
<!-- See stylecss.html file -->
<?!= include('style.css'); ?>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<aside id="sidebar">
<div class="h-100">
<div class="sidebar-logo">
<a href="#">CodzSword</a>
</div>
<!-- Sidebar Navigation -->
<ul class="sidebar-nav">
<li class="sidebar-header">
Tools & Components
</li>
<li class="sidebar-item">
<a class="sidebar-link" onclick="changePage('princp')">
<i class="fa-solid fa-list pe-2"></i>
Dashboard
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" onclick="changePage('DataTable')">
<i class="fa-solid fa-list pe-2"></i>
Form
</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#pages"
aria-expanded="false" aria-controls="pages">
<i class="fa-regular fa-file-lines pe-2"></i>
Pages
</a>
<ul id="pages" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
<li class="sidebar-item">
<a href="#" class="sidebar-link">Analytics</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">Ecommerce</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">Crypto</a>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard"
aria-expanded="false" aria-controls="dashboard">
<i class="fa-solid fa-sliders pe-2"></i>
Dashboard
</a>
<ul id="dashboard" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
<li class="sidebar-item">
<a href="#" class="sidebar-link">Dashboard Analytics</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">Dashboard Ecommerce</a>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#auth"
aria-expanded="false" aria-controls="auth">
<i class="fa-regular fa-user pe-2"></i>
Auth
</a>
<ul id="auth" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
<li class="sidebar-item">
<a href="#" class="sidebar-link">Login</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">Register</a>
</li>
</ul>
</li>
<li class="sidebar-header">
Multi Level Nav
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#multi"
aria-expanded="false" aria-controls="multi">
<i class="fa-solid fa-share-nodes pe-2"></i>
Multi Level
</a>
<ul id="multi" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
<li class="sidebar-item">
<a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse"
data-bs-target="#multi-two" aria-expanded="false" aria-controls="multi-two">
Two Links
</a>
<ul id="multi-two" class="sidebar-dropdown list-unstyled collapse">
<li class="sidebar-item">
<a href="#" class="sidebar-link">Link 1</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">Link 2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</aside>
<!-- Main Component -->
<div class="main">
<nav class="navbar navbar-expand px-3 border-bottom">
<!-- Button for sidebar toggle -->
<button class="btn" id="sidebar-toggle" type="button"> <!-- botão controle -->
<span class="navbar-toggler-icon"></span>
</nav>
<main class="content px-3 py-2">
<div class="container-fluid">
<div class="mb-3">
<section id = "princp">
<?!= HtmlService.createHtmlOutputFromFile('princp').getContent() ?>
</section>
<section id = "DataTable" class="pages">
<?!= HtmlService.createHtmlOutputFromFile('DataTable').getContent() ?>
</section>
</div>
</div>
</main>
<footer class="footer">
<div class="container-fluid">
<div class="row text-muted">
<div class="col-6 text-start">
<p class="mb-0">
<a href="#" class="text-muted">
<strong>SGT Roberto</strong>
</a>
</p>
</div>
<div class="col-6 text-end">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" class="text-muted">Contact</a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted">About Us</a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted">Terms</a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted">Booking</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/boot...@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gasparesganga-jque...@2.1.7/dist/loadingoverlay.min.js"></script>
<?!= HtmlService.createHtmlOutputFromFile('script.js').getContent() ?>
</body>
<script>
function LoginUser()
{
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
google.script.run.withSuccessHandler(function(output)
{
if(output == 'TRUE')
{ var url1 ='https://script.google.com/macros/s/AKfycbx305bxHLmxCyAZlNwTyGUNph5MpXY_z9-p0SyWT5n5/dev';
//var url1 ='https://docs.google.com/spreadsheets/d/1jNKUrwdSBuXy_62ZhuwNo05bymla2AR7b8DLi5_ZLRA/edit?pli=1#gid=308219180';//
var winRef = window.open(url1);
winRef ? google.script.host.close() : window.onload = function() { window.location.href = url1; };
(function() {
window.close();
}, 1000);
}
else if(output == 'FALSE')
{
document.getElementById("errorMessage").innerHTML = "Data tidak valid!";
}
}).checkLogin(username, password);
self.close();
window.close();
}
</script>
</html>
script.js
const toggler = document.querySelector(".btn");
toggler.addEventListener("click",function(){
document.querySelector("#sidebar").classList.toggle("collapsed");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.bundle.min.js"></script>
<script>
function getIndexHtml() {
var htmlContent = HtmlService.createHtmlOutputFromFile('index').getContent();
return htmlContent;
}
let dataSet
window.onload = () => {
<!--$.LoadingOverlay("show00");-->
google.script.run.withSuccessHandler(data => {
dataSet = data;
showData(dataSet);
$.LoadingOverlay("hide00");
}).getData();
}
function changePage(pages) {
console.log(pages)
var idElement = [...document.querySelectorAll('section')].forEach(elm => {
if(elm.id===pages){
document.getElementById(elm.id).style.display = "block"
}else{
document.getElementById(elm.id).style.display = "none"
}
});
}
function showData(dataSet) {
$(document).ready(function () {
$('#example').DataTable({
columns: [
{title: 'ID'},
{title: 'Name'},
{title: 'Class'},
{title: 'Email'},
{title: 'Phone'},
{title: 'Phone'},
{title: 'Phone'},
{title: 'Phone'},
{title: 'Phone'},
{title: 'Phone'},
{title: 'Phone'},
{title:'Edita', defaultContent: "<button type='button' class='btn btn-outline-primary btn-xs editBtn' data-toggle='modal' data-target='#myModal' onclick='editData(this);'><i class='fa fa-edit'></i></button></td><td><button type='button' class='btn btn-outline-danger btn-xs deleteBtn' onclick='deleteData(this);'><i class='fa fa-trash''></i></button>"},
],
data: dataSet,
destroy: true,
//lengthMenu: [5,10, 25, 50, 75, 100],
lengthMenu: [10, 25, 50, { label: 'All', value: -1 }]
//order: [[0, 'desc']] esc
});
});
}
const sidebarToggle = document.querySelector("#sidebar-toggle");
sidebarToggle.addEventListener("click",function(){
document.querySelector("#sidebar").classList.toggle("collapsed");
});
document.querySelector(".theme-toggle").addEventListener("click",() => {
toggleLocalStorage();
toggleRootClass();
});
function toggleRootClass(){
const current = document.documentElement.getAttribute('data-bs-theme');
const inverted = current == 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-bs-theme',inverted);
}
function toggleLocalStorage(){
if(isLight()){
localStorage.removeItem("light");
}else{
localStorage.setItem("light","set");
}
}
function isLight(){
return localStorage.getItem("light");
}
if(isLight()){
toggleRootClass();
}
</script>
<script>
/**
* Prevent forms from submitting.
* */
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener("load", functionInit, true);
window.addEventListener("beforeunload", falseState, true);
/**
* INITIALIZE FUNCTIONS ONLOAD
* */
function functionInit(){
$('#spinnerModal').modal('show');
preventFormSubmit();
getLastTenRows();
};
/**
* HANDLE FORM SUBMISSION
* */
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
setTimeout(function() {$('#myModal').modal('hide');}, 2000);
document.getElementById("message").innerHTML = "<div class='alert alert-warning' role='alert'>Data berhasil ditambahkan!.</div>";
//document.getElementById("myForm").reset();
}
/**
* Clear form when pop-up is closed.
* */
function clearForm() {
document.getElementById("message").innerHTML = "";
document.getElementById("myForm").reset();
}
/**
* hide colom 1
* */
function backhideCol0() {
var oTable = $('#dataTable').dataTable();
oTable.fnSetColumnVis( 0, false );
}
/**
* GET LAST 10 ROWS
* */
function getLastTenRows (){
google.script.run.withSuccessHandler(createTable).getLastTenRows();
}
/**
* GET ALL DATA
* */
function getAllData(){
//document.getElementById('dataTable').innerHTML = "";
google.script.run.withSuccessHandler(createTable).getAllData();
}
/**
* CREATE THE DATA TABLE
* */
function createTable(dataArray) {
document.getElementById('myForm').reset();
document.getElementById('message').innerHTML = "";
if(dataArray){
var result = "<div>"+
"<table class='table table-sm' style='font-size:1em'>"+
"<thead style='white-space: nowrap'>"+
"<tr>"+
//Change table headings to match witht he Google Sheet
"<th scope='col'>RecID</th>"+
"<th scope='col'>Data de Entrada</th>"+
"<th scope='col'>Responsável Pelo Cad</th>"+
"<th scope='col'>Forma de Entrega Documento</th>"+
"<th scope='col'>ANO</th>"+
"<th scope='col'>~MÊS</th>"+
"<th scope='col'>Trimestre</th>"+
"<th scope='col'>Período</th>"+
"<th scope='col'>Data do Evento</th>"+
"<th scope='col'>Nome do Evento</th>"+
"<th scope='col'>Local/Endereço do Evento</th>"+
"<th scope='col'>Bairro</th>"+
"<th scope='col'>Cidades/Município</th>"+
"<th scope='col'>hora. iníc.</th>"+
"<th scope='col'>hora. fim</th>"+
"<th scope='col'>Tipo de Evento</th>"+
"<th scope='col'>SubTipo</th>"+
"<th scope='col'>Qtde Dias</th>"+
"<th scope='col'>Est.de Público</th>"+
"<th scope='col'>Documento5T</th>"+
"<th scope='col'>Documento6U</th>"+
"<th scope='col'>Tipo de Policiamento</th>"+
"<th scope='col'>File 1</th>" +
"<th scope='col'>File 2</th>" +
"<th scope='col'>WC</th>"+
"<th scope='col'>AF Time</th>"+
"<th scope='col'>Aksi</th>"+
"<th scope='col'></th>"+
"</tr>"+
"</thead>";
for(var i=0; i<dataArray.length; i++) {
result += "<tr>";
for(var j=0; j<dataArray[i].length; j++){
result += "<td>"+dataArray[i][j]+"</td>";
}
result += "<td><button type='button' class='btn btn-outline-primary btn-xs editBtn' data-toggle='modal' data-target='#myModal' onclick='editData(this);'><i class='fa fa-edit'></i></button></td>";
result += "<td><button type='button' class='btn btn-outline-danger btn-xs deleteBtn' onclick='deleteData(this);'><i class='fa fa-trash''></i></button></td>";
result += "</tr>";
}
result += "</table></div>";
var div = document.getElementById('dataTable');
div.innerHTML = result;
$(document).ready(function() {
$('#dataTable').DataTable({
destroy:true,
responsive: true,
select: true,
ordering: true,
order: [[0, 'desc' ]],
pageLength: 5,
lengthMenu: [
[5, 10, 25, 50, 100,150, -1 ],
['5', '10', '25', '50','100', 'All' ]
],
"dom": "<'row'<'col-6'l><'col-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
// ganti bahasa/info di datatable
language: {
lengthMenu: "_MENU_ ",
zeroRecords: "tidak ditemukan",
info: '<i class="fas fa-angle-double-left"></i> _START_ ke _END_ dari _TOTAL_ <i class="fas fa-angle-double-right"></i>',
infoEmpty: "menampilkan 0 ke 0 dari 0 baris",
infoFiltered: "(dari _MAX_ baris data)",
infoPostFix: "",
search: '<i class="fas fa-search" fa-2x></i> :',
url: "",
paginate: {
first: "awal",
previous: '<i class="fas fa-chevron-left fa-lg" ></i>',
next: '<i class="fas fa-chevron-right fa-lg"></i>',
last: "akhir"
},
},
columnDefs: [{
targets: [1, 8, 9],
className: 'all',
},
{
targets: [0],
visible: false, //hide kolom pertama/0
searchable: true,
},
{
targets: [3],
className: 'dt-body-center',
"render": function(data, type, row, meta) {
if (type === 'display' && data.length > 5) {
data = '<a href="https://wa.me/62' + data + '?text=' + row[3] + '" target="_blank">' + '<i class="fa-brands fa-whatsapp" style="font-size:20px;color:red"></i>' + '</a>';
}
return data;
}
},
{
targets: [22], //colom 7 adalah kolom file1 doc pdf
className: 'dt-body-center',
"render": function(data, type, row, meta) {
if (type === 'display' && data.length > 20) {
data = '<a href="' + data + '?text=' + row[22] + '" target="_blank">' + '<i class="fa fa-file" style="font-size:15px;color:black"></i>' + '</a>';
}
return data;
}
},
{
targets: [23], //colom 8 adalah kolom file2 doc pdf
className: 'dt-body-center',
"render": function(data, type, row, meta) {
if (type === 'display' && data.length > 20) {
data = '<a href="' + data + '?text=' + row[23] + '" target="_blank">' + '<i class="fa fa-file" style="font-size:15px;color:black"></i>' + '</a>';
}
return data;
}
},
],
initComplete: function() {
var column1 = this.api().column(7); //colom 4 adalah kolom gender
var select = $('#filterGender')
.on('change', function() {
var val = $(this).val();
column1.search(val ? '^' + $(this).val() + '$' : val, true, false).draw();
});
column1.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
var exist1 = {};
$('#filterGender > option').each(function() {
if (exist1[$(this).val()])
$(this).remove();
else
exist1[$(this).val()] = true;
});
var column2 = this.api().column(9); //colom 6 adalah kolom kota
var select = $('#filterKota')
.on('change', function() {
var val = $(this).val();
column2.search(val ? '^' + $(this).val() + '$' : val, true, false).draw();
});
column2.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
var exist2 = {};
$('#filterKota > option').each(function() {
if (exist2[$(this).val()])
$(this).remove();
else
exist2[$(this).val()] = true;
});
var table = $('#dataTable').DataTable();
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [{
extend: 'excelHtml5',
title: 'Data Laporan',
filename: 'Download_Data_Laporan',
exportOptions: {
orthogonal: 'export',
columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ],
}
},
{
extend: 'pdfHtml5',
title: 'Data Laporan',
filename: 'Download_Data_Laporan',
orientation: 'landscape',
pageSize: "A3",
customize: function (doc) {
doc.pageMargins = [20, 20, 20, 20];
},
exportOptions: {
orthogonal: 'export',
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
}
},
{
extend: 'copyHtml5',
exportOptions: {
orthogonal: 'export',
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
}
},
{
extend: 'csvHtml5',
title: 'Data Laporan',
filename: 'Download_Data_Laporan',
exportOptions: {
orthogonal: 'export',
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
}
},
],
}).container().appendTo($('#buttons'));
$('#excel').on('click', function() {
$('.buttons-excel').click()
});
$('#pdf').on('click', function () {
$('.buttons-pdf').click()
});
$('#copy').on('click', function () {
$('.buttons-copy').click()
});
$('#csv').on('click', function () {
$('.buttons-csv').click()
});
//Show/hide kolom
document.querySelectorAll('a.dropdown-item').forEach((el) => {
el.addEventListener('click', function (e) {
e.preventDefault();
let columnIdx = e.target.getAttribute('data-column');
let column = table.column(columnIdx);
// Toggle the visibility
column.visible(!column.visible());
});
});
// cari tanggal/filter tanggal
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $('#min-date').val();
var max = $('#max-date').val();
var createdAt = data[5] || 0; // Sesuaikan kolom table
//var createdAt = data[5] || data[5] || 0; //
if (
(min == "" || max == "") ||
(moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
) {
return true;
}
return false;
}
);
$('.filter-datepicker').change(function () {
table.draw();
});
},
});
});
}
}
/**
* DELETE DATA
* */
function deleteData(el) {
var oTable = $('#dataTable').dataTable();
// Hide the second column after initialisation
oTable.fnSetColumnVis(0, true);
Swal.fire({
title: 'Apa kamu yakin?',
icon: 'warning',
html: `<input type="password" id="password" class="swal2-input" placeholder="Input Password">`,
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: 'Batal',
confirmButtonText: 'Ya, Hapus data ini!',
allowOutsideClick: false,
preConfirm: () => {
var pass = "123";
var password = Swal.getPopup().querySelector('#password').value
if (password == pass) {
var recordId = el.parentNode.parentNode.cells[0].innerHTML;
google.script.run.withSuccessHandler(createTable).deleteData(recordId);
oTable.fnSetColumnVis(0, false);
} else {
Swal.showValidationMessage('Invalid Password')
}
},
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Hapus !',
'File telah dihapus!',
'success',
)
} else {
Swal.fire(
'Batal !',
'Batal hapus file ini :)',
'error',
)
oTable.fnSetColumnVis(0, false);
}
});
}
//FOR POPULATE FORM------------------------------------------------------------------------------------------------------
//RETRIVE DATA FROM GOOGLE SHEET FOR KOTA DROPDOWN
function createKotaDropdown() {
//SUBMIT YOUR DATA RANGE FOR DROPDOWN AS THE PARAMETER
google.script.run.withSuccessHandler(kotaDropDown).getDropdownListKota("Kota!A1:A");
}
//POPULATE KOTA DROPDOWNS
var list = document.getElementById('kota');
for (var i = 0; i < values.length; i++) {
var option = document.createElement("option");
option.value = values[i];
option.text = values[i];
list.appendChild(option);
}
}
/**
* EDIT DATA
* */
function editData(el) {
var oTable = $('#dataTable').dataTable();
// // Hide/show the column after initialisation
oTable.fnSetColumnVis( 0, true );
var recordId = el.parentNode.parentNode.cells[0].innerHTML;
google.script.run.withSuccessHandler(populateForm).getRecordById(recordId);
}
/**
* POPULATE FORM
* */
function populateForm(records) {
document.getElementById('RecId').value = records[0][0];
document.getElementById('nama').value = records[0][1];
document.getElementById('email').value = records[0][2];
document.getElementById('telp').value = records[0][3];
document.getElementById('gender').value = records[0][4];
document.getElementById('tglLahir').value = records[0][5];
document.getElementById('kota').value = records[0][6];
document.getElementById("message").innerHTML = "<div class='alert alert-warning' role='alert'>Update [ID: " + records[0][0] + "]</div>";
}
</script>
<!--DataTable Bootstrap5--->
<link href="https://cdn.datatables.net/v/bs5/jszip-2.5.0/b-2.3.5/b-html5-2.3.5/datatables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
<style>
*,
::after,
::before {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 0.875rem;
opacity: 1;
overflow-y: scroll;
margin: 0;
}
.pages{
display:none;
}
a {
cursor: pointer;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
li {
list-style: none;
}
h4 {
font-family: 'Poppins', sans-serif;
font-size: 1.275rem;
color: var(--bs-emphasis-color);
}
/* Layout for admin dashboard skeleton */
.wrapper {
align-items: stretch;
display: flex;
width: 100%;
}
#sidebar {
max-width: 264px;
min-width: 264px;
background: var(--bs-dark);
transition: all 0.35s ease-in-out;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 0;
overflow: hidden;
transition: all 0.35s ease-in-out;
width: 100%;
background: var(--bs-dark-bg-subtle);
}
/* Sidebar Elements Style */
.sidebar-logo {
padding: 1.15rem;
}
.sidebar-logo a {
color: #e9ecef;
font-size: 1.15rem;
font-weight: 600;
}
.sidebar-nav {
flex-grow: 1;
list-style: none;
margin-bottom: 0;
padding-left: 0;
margin-left: 0;
}
.sidebar-header {
color: #e9ecef;
font-size: .75rem;
padding: 1.5rem 1.5rem .375rem;
}
a.sidebar-link {
padding: .625rem 1.625rem;
color: #e9ecef;
position: relative;
display: block;
font-size: 0.875rem;
}
.sidebar-link[data-bs-toggle="collapse"]::after {
border: solid;
border-width: 0 .075rem .075rem 0;
content: "";
display: inline-block;
padding: 2px;
position: absolute;
right: 1.5rem;
top: 1.4rem;
transform: rotate(-135deg);
transition: all .2s ease-out;
}
.sidebar-link[data-bs-toggle="collapse"].collapsed::after {
transform: rotate(45deg);
transition: all .2s ease-out;
}
.avatar {
height: 40px;
width: 40px;
}
.navbar-expand .navbar-nav {
margin-left: auto;
}
.content {
flex: 1;
max-width: 100vw;
width: 100vw;
}
@media (min-width:768px) {
.content {
max-width: auto;
width: auto;
}
}
.card {
box-shadow: 0 0 .875rem 0 rgba(34, 46, 60, .05);
margin-bottom: 24px;
}
.illustration {
background-color: var(--bs-primary-bg-subtle);
color: var(--bs-emphasis-color);
}
.illustration-img {
max-width: 150px;
width: 100%;
}
/* Sidebar Toggle */
#sidebar.collapsed {
margin-left: -264px;
}
/* Footer and Nav */
@media (max-width:767.98px) {
.js-sidebar {
margin-left: -264px;
}
#sidebar.collapsed {
margin-left: 0;
}
.navbar,
footer {
width: 100vw;
}
}
/* Theme Toggler */
.theme-toggle {
position: fixed;
top: 50%;
transform: translateY(-65%);
text-align: center;
z-index: 10;
right: 0;
left: auto;
border: none;
background-color: var(--bs-body-color);
}
html[data-bs-theme ="dark"] .theme-toggle .fa-sun,
html[data-bs-theme ="light"] .theme-toggle .fa-moon {
cursor: pointer;
padding: 10px;
display: block;
font-size: 1.25rem;
color: #FFF;
}
html[data-bs-theme ="dark"] .theme-toggle .fa-moon {
display: none;
}
html[data-bs-theme ="light"] .theme-toggle .fa-sun {
display: none;
}
</style>
<style>
body {
font-family:sans-serif;
font-size: 14px;
}
.btn-group-xs > .btn, .btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: .2rem;
}
.btn-head-table {
padding-bottom: 10px;
}
.editBtn:hover {
color: white;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sel...@4.1.0-rc.0/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-boot...@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div>
</div>
<div hidden id="buttons"></div>
<div class="collapse bg-light" id="menu">
<hr style="margin-top: 5px; margin-bottom: 8px">
<div class="row g-2 justify-content-start">
<div class="col-6 col-sm-2">
<select class="form-select form-select" name="filterGender" id="filterGender">
<option value="">All Gender</option>
</select>
</div>
<div class="col-6 col-sm-2">
<select class="form-select form-select" name="filterKota" id="filterKota">
<option value="">All Kota</option>
</select>
</div>
<div class="col-6 col-sm-2">
<div class="input-group input-group">
<span class="input-group-text"><span class="fa-solid fa-calendar-days"></span></span>
<input type="date" class="form-control filter-datepicker" name="min-date" id="min-date" placeholder="Tgl Awal" onfocus="(this.type = 'date')">
</div>
</div>
<div class="col-6 col-sm-2">
<div class="input-group input-group">
<span class="input-group-text"><span class="fa-solid fa-calendar-days"></span></span>
<input type="date" class="form-control filter-datepicker" name="max-date" id="max-date" placeholder="Tgl Akhir" onfocus="(this.type = 'date')">
</div>
</div>
<div class="col-6 col-sm-2">
<div class="btn-group" style="width:80%">
<button class="btn btn-warning dropdown-toggle" style="width:80%" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"><i class="fa-solid fa-gears"></i>
Kolom Control
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" data-column="0">ID</a></li>
<li><a class="dropdown-item" data-column="1">Nama</a></li>
<li><a class="dropdown-item" data-column="2">Email</a></li>
<li><a class="dropdown-item" data-column="3">Telpon</a></li>
<li><a class="dropdown-item" data-column="4">Gender</a></li>
<li><a class="dropdown-item" data-column="5">Tgl Lahir</a></li>
<li><a class="dropdown-item" data-column="6">Kota/Kabupaten</a></li>
<li><a class="dropdown-item" data-column="7">File 1</a></li>
<li><a class="dropdown-item" data-column="8">File 2</a></li>
<li><a class="dropdown-item" data-column="9">Last Update</a></li>
<li><a class="dropdown-item" data-column="10">Edit</a></li>
<li><a class="dropdown-item" data-column="11">Hapus</a></li>
</ul>
</div>
</div>
<div class="col-6 col-sm-2">
<div class="btn-group" style="width:48%">
<button class="btn btn-success dropdown-toggle" style="width:48%" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa-solid fa-download"></i> Export</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" style="color: yellow;" id="excel"><i class="fa-regular fa-file-excel"></i> Excel</a></li>
<li><a class="dropdown-item" style="color: yellow;" id="pdf"><i class="fa-regular fa-file-pdf"></i> Pdf</a></li>
<li><a class="dropdown-item" style="color: yellow;" id="copy"><i class="fa-regular fa-copy"></i> Copy</a></li>
<li><a class="dropdown-item" style="color: yellow;" id="csv"><i class="fa-solid fa-file-csv"></i> Csv</a></li>
</ul>
</div>
<div class="btn-group" style="width:48%;">
<button class="btn btn-secondary" type="button" id="refresh" onclick="google.script.run
.withSuccessHandler(refreshApp)
.getNewHtml()"><i class="fa-solid fa-arrows-rotate"></i> Refresh</button>
</div>
</div>
</div>
<hr style="margin-top: 8px; margin-bottom: 5px">
</div>
<hr style="height:2px; color:#800000; margin-top: 8px; margin-bottom: 5px">
<button type="button" class="btn btn-success" style="float:right; margin-right: 1em; margin-top: 5px;" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling"><i class="fa-solid fa-bars fa-lg"></i></button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header-dark bg-dark">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
<!-- The Data Table is inserted here by JavaScript ------------------ -->
<table id="dataTable" class="table table-striped table-responsive nowrap" style="width:100%"></table>
<script type="text/javascript">
$(document).ready(function() {
$("#filterGender, #filterKota").select2({
theme: "bootstrap-5",
//selectionCssClass: "select2--small",
//dropdownCssClass: "select2--small",
});
});
</script>
princp.html
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<base target="_top">
<!-- Popup Modal -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Data Table -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site CPMC</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boot...@5.3.0-alpha2/dist/css/bootstrap.min.css">
</head>
<body onload="createCountryDropdown()">
<div class="container-dark bg-warning py-2">
<div class="row g-2 justify-content-start">
<div class="col">
<h4 class="d-inline-block align-middle" style="color: white; margin-left: 0.5em; margin-top: 10px"><strong>INPUT GOOGLE SHEET</strong></h4>
<button type="button" class="btn btn-success" style="float:right; margin-right: 1em; margin-top: 5px;" data-bs-toggle="collapse" data-bs-target="#menu"><i class="fa-solid fa-bars fa-lg"></i></button>
<button class="btn btn-primary" type="button" style="width:90px; float:right; margin-right: 0.5em; margin-top: 5px;" id="tambah" data-toggle='modal' data-target='#myModal'><i class="fa-solid fa-plus"></i> Input</button>
</div>
</div>
</div>
<div class="container-fluid">
<!-- The Modal Form -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h2>Cadastro de Eventos</h2>
<button type="button" id="btn-close" class="close" data-dismiss="modal" onclick="clearForm();">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<!-- See Form.html file -->
<?!= include('form'); ?>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas-header">
<div class="row">
<div class="col-sm-9">
<div class="btn-head-table">
<p></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md">
<!-- See DataTable.html File -->
<?!= include('DataTable'); ?>
<?!= include('SpinnerModal'); ?>
</div>
</div>
</div>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages