0

当数据在初始页面加载时提供时，DataTables 可以与 GAS HTMLService 一起正常工作，但 GAS 的更好做法是“异步加载数据，而不是在模板中”。此外，DataTables 的服务器端处理为大型数据表提供了响应更快的 UI。我正在寻找满足这些建议的模式。我从一个基本的 DataTables 示例开始翻译成 GAS HTMLService 模板模型。

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（内嵌数据表定义）

<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 Code 中添加功能

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 回答