Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/index.html

Last active March 10, 2023 04:09
Show Gist options
  • Save neno-tech/0b663ab4acd0778282e0738d815f1c49 to your computer and use it in GitHub Desktop.
Save neno-tech/0b663ab4acd0778282e0738d815f1c49 to your computer and use it in GitHub Desktop.
Download ZIP
SheetRock
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>SheetRock - DataTable</title>
<!-- Bootstrap CSS 5.1.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
<!-- Fonts Awesome-->
<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Itim|Kanit|Mali|Mitr|Niramit|Pattaya|Prompt|Questrial|Sarabun|Sriracha'
rel='stylesheet' type='text/css'>
<!-- Main CSS File -->
<style>
body {
font-family: "Prompt" !important;
}
</style>
<!-- Load jQuery and Sheetrock from Unpkg -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sheetrock@1.2.0/dist/sheetrock.min.js"></script>
<!-- Load DataTables script and stylesheet from Unpkg -->
<script src="https://unpkg.com/datatables@1.10.18/media/js/jquery.dataTables.min.js"></script>
<!-- CSS DataTable -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.2/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.2.1/css/searchBuilder.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.4/css/colReorder.dataTables.min.css">
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap">
<span class="navbar-brand flex-grow-1"><i class="fa fa-chevron-circle-right"></i> ผลการเรียนของนักเรียน โรงเรียนอภิวัฒน์สอนสร้างสื่อ</span>
</nav>
<div class="alert alert-primary" role="alert" background-color: #FCE17A>
<p> <i class="fa fa-chevron-right"></i> พิมพ์ค้นหาข้อมูลที่ต้องการจากช่องการค้นหา
<br> <i class="fa fa-chevron-right"></i> หากไม่พบข้อมูล หรือมีปัญหา..ติดต่อครูอภิวัฒน์ โทร 000-111-2222</p>
</div>
<table id="example" class="table table-condensed table-striped"></table>
</div>
</div>
<!-- Main JavaScript File -->
<!-- JavaScript DataTable -->
<script src="https://cdn.datatables.net/1.11.2/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.2.1/js/dataTables.searchBuilder.min.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.2.1/js/searchBuilder.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.4/js/dataTables.colReorder.min.js"></script>
<script>
// ใส่ URL ของ Google Sheet.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1bwFTHlv08Heiq8fJERLiAf2M2MCTlVwtlGKCHYWffyE/edit#gid=0';
// Load top ten switch hitters.
$('#example').sheetrock({
url: mySpreadsheet,
// query: ("select A,B,C,D,E,F,G,H,I "),
}).on('sheetrock:loaded', function () {
$(this).DataTable({
responsive: true,
colReorder: true,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "ทั้งหมด"]],
order: [[0, "asc"], [1, "asc"], [2, "asc"]],
//sPaginationType: "full_numbers",
// กำหนดหัวคอลัมน์โดยตั้งชื่อเอง
columns: [
{ title: "ชื่อคอลัมน์ที่ 1" },
{ title: "ชื่อคอลัมน์ที่ 2" },
{ title: "ชื่อคอลัมน์ที่ 3" },
{ title: "ชื่อคอลัมน์ที่ 4" },
{ title: "ชื่อคอลัมน์ที่ 5" },
{ title: "ชื่อคอลัมน์ที่ 6" },
{ title: "ชื่อคอลัมน์ที่ 7" },
{ title: "ชื่อคอลัมน์ที่ 8" },
{ title: "ชื่อคอลัมน์ที่ 9" },
{ title: "ชื่อคอลัมน์ที่ 10" },
// { title: "รูปภาพ",
// render: function (data, type, row, meta) {
// return '<a href="' + data + '" target="_blank"><img src="' + data + '" class="avatar" width="50" height="50"/></a>';
// },
// },
],
language: {
sProcessing: "กำลังดำเนินการ...",
sLengthMenu: "แสดง_MENU_ แถว",
sZeroRecords: "ไม่พบข้อมูล",
sInfo: "แสดง _START_ ถึง _END_ จาก _TOTAL_ แถว",
sInfoEmpty: "แสดง 0 ถึง 0 จาก 0 แถว",
sInfoFiltered: "(กรองข้อมูล _MAX_ ทุกแถว)",
sInfoPostFix: "",
sSearch: "ค้นหา:",
sUrl: "",
oPaginate: {
sFirst: "หน้าแรก",
sPrevious: "ก่อนหน้า",
sNext: "ถัดไป",
sLast: "หน้าสุดท้าย"
}
},
}
);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment