0

DataTables は、最初のページの読み込み時にデータが提供される場合、GAS HTMLService で正常に動作しますが、GAS のより良い方法は、「テンプレートではなく非同期でデータを読み込む」ことです。また、DataTable のサーバー側処理により、大きなデータテーブルに対して応答性の高い UI が提供されます。これらの推奨事項を満たすパターンを探しています。GAS HTMLService テンプレート モデルに変換された基本的な DataTables の例から始めています。

GS コード:

 function doGet() {
   Logger.log("Start");
   var start = new Date();
   // rt params
   // var rtParameters = getRunTimeParameters(request);
   // uses HtmlService to send page based on a template
   var temp = HtmlService.createTemplateFromFile('chart');
   // prepare data for initial page

   Logger.log("TIME to return:"+ (new Date() -start));
   return temp.evaluate();
 }

  function include(filename) {
    // helper function to load html into template from sep files in project
    return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
  }

HTMLテンプレート - グラフ

   ...
   <body>
   <h1>JQUERY  DataTables  Page  Generated in Google Apps Script </h1>
   <p>Includes sorting, paging and filtering by default.</p>
   <p>Entire data table loaded in one hit.</p>
   <div id="demo"></div>
   <?!= include('JavaScript'); ?>
   </body>

Javascript (Datatable 定義をインラインで使用)

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8">
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
       "aaData": [
        /* Reduced data set */
        [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
        [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
        [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
        [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
        [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
        [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
        [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
        [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
        [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
        [ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
        [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
        [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
    ],
    "aoColumns": [
        { "sTitle": "Engine" },
        { "sTitle": "Browser" },
        { "sTitle": "Platform" },
        { "sTitle": "Version", "sClass": "center" },
        { "sTitle": "Grade", "sClass": "center" }
    ]

} );

} );

最初の問題: https://developers.google.com/apps-script/guides/html-service-best-practices#load_data_asynchronously_not_in_templatesごとに DataTable 'aaData' を非同期にロードする方法

より一般的に: GAS を使用して DataTables サーバー側処理を実装する方法。

4

1 に答える 1

4

簡単な方法: 一度にすべてのデータを取得します。このような

GSコード内追加機能

function getData(){
   var data = SpreadsheetApp.openById('YourSheetID').getSheetByName('YourSheetName').getDataRange().getValues();
   return data;
}

HTML テンプレートの場合:

    <script type='text/javascript'>
    $(document).ready(function(){
        var runner = google.script.run.withFailureHandler(onFailure);
        runner.withSuccessHandler(onSuccess).getData();
    });
    var onSuccess = function(data){
        var aDataSet = data.slice(1);  // all except header


        var head = [];  // headers
        data[0].forEach(function(e){
            head.push({'sTitle': e});
        });

        $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
        $('#example').dataTable( {
            "aaData": aDataSet,
            "aoColumns": head
        });
    }
    var onFailure = function(err){
        alert(err.message);
    }
    </script>

スプレッドシートの例を参照してください（ソースコード）

UPD: GAS でサーバー側の処理を実装するには、ContentService を (REST サーバーとして) 使用する必要があります。iDisplayStart、iDisplayLength、iSortCol_0 などのパラメーターを処理する必要があります。

doGet(e){
  var iSortCol_0 = e.parameter.iSortCol;
  ...
  etc.

PHP + MySQLでの実装方法を参照してください

ページング、順序、制限、およびその他の操作を簡単にするために、すべてのデータをScriptDBに保存できます。これには、クエリするための同様の機能が既にあります

私の悪い英語でごめんなさい=）

于 2013-07-02T10:24:27.263 に答える