คริสตจักร ชิโลห์ ประเทศไทย

อสย. 2:2 ในวาระสุดท้ายจะเป็นดังนี้ คือภูเขาแห่งพระนิเวศของพระยาห์เวห์ จะถูกสถาปนาขึ้นเป็นที่สูงสุดของภูเขาทั้งหลาย และจะถูกยกขึ้นให้อยู่เหนือบรรดาเนินเขา ประชาชาติทั้งหมดจะหลั่งไหลเข้ามาหา

DataTables example - Mobile support (Responsive integration)

code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  // .setFaviconUrl('https://drive.google.com/file/d/1edLz97zRkTjqksjx7eo_SXQavnPctOOG/view')
  .setTitle('ทะเบียนสมาชิกคริสตจักร ชิโลห์')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getData() {

   var Id = "1nHnzA6z-RV--------------OUPhmnA"; //แก้ 1
   var ss=SpreadsheetApp.openById(Id);
   var sheet = ss.getSheetByName("ทังหมด");
   var range = sheet.getDataRange();
   var values = range.getDisplayValues();
     Logger.log(values);
    return values;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

****************************
index.html
<!DOCTYPE html>
<html>

<head>
  <base target="_top">
 <script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.3.3/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.3.3/css/rowReorder.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css" />

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
  
  <?!= include('css');?>
</head>

<body>
  <div class="container-fluid">
    <br>
      <table id="data-table" class="display responsive nowrap" style="width:100%">

      </table>
  </div>
    <?!= include('javaScript');?>
</body>

</html>
**********************************
javaScript.html
<script>
$(document).ready(function() {
    var table = $('#example').DataTable( {
        rowReorder: {
            selector: 'td:nth-child(2)'
        },
        responsive: true
    } );
} );
</script>

<script>
import DataTable from 'datatables.net-dt';
import 'datatables.net-responsive-dt';
 
let table = new DataTable('#myTable', {
    responsive: true
});
</script>

<script>
bower install --save datatables.net
bower install --save datatables.net-dt
</script>

<script>
  google.script.run.withSuccessHandler(showData).getData();
  function showData(dataArray){
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
        columns: [
          {"title":"ลำดับ"},
          {"title":"ชื่อ-สกุล"},
          {"title":"วันเดือนปีเกิด"},
          {"title":"โทรมือถือ"},
          {"title":"บ้านเลขที่"},
          {"title":"หมู่ที่"},
          {"title":"ชื่อบ้าน"},
          {"title":"ตำบล"},
          {"title":"อำเภอ"},
          {"title":"จังหวัด"},
          {"title":"หัวหน้าเซลล์"},
          {"title":"ชื่อเซลล์"}
        ]
      });
    });
  };
</script>
*****************************************
css.html

<style>
  @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300&display=swap');

</style>
****************************

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น

หน้าเว็บ

DataTables example - Mobile support (Responsive integration)

ไม่มีความคิดเห็น:

แสดงความคิดเห็น