如何使用Google Apps腳本執行jQuery DataTables服務器端數據

當初始頁面加載時數據提供時，DataTables可以正常使用GAS HTMLService，但對於GAS更好的做法是「異步加載數據，而不是模板」。 DataTables的服務器端處理爲大型數據表提供了更響應的UI。我正在尋找滿足這些建議的模式。我從一個基本的DataTables例子開始，將其轉換爲GAS HTMLService模板模型。如何使用Google Apps腳本執行jQuery 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(); 
    }

HTMLtemplate - 圖表

... 
    <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" } 
    ] 

});

}）;

初始問題：如何加載數據表「aaData」異步每https://developers.google.com/apps-script/guides/html-service-best-practices#load_data_asynchronously_not_in_templates

更一般地：如何實現數據表與GAS服務器端處理。

來源

2013-07-02 DavidF

簡單的方法：一次獲取所有數據。這樣

在GS代碼添加功能

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

在HTMLtemlate：

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

見我example爲spreadsheet（source code）

UPD： 爲了實現服務器用GAS處理，你需要使用contentService的（如REST服務器）您將需要處理的參數，如iDisplayStart，iDisplayLength，iSortCol_0等

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

看看它是如何implemented on PHP + MySQL

爲了更容易做分頁，秩序，限制和其它操作，可以保存所有的數據在ScriptDB，它已經具備了類似的功能來查詢

對不起我的英文不好=）

來源

2013-07-02 10:24:27

非常感謝。對我而言，缺少的關鍵是如何處理參數iDisplayStart等。我更喜歡從ContentService而不是htmlservice獲得的明確分隔。一次加載數據爲我提供了一個很好的解決方案，但我希望有一條清晰的路徑來處理大量的數據。 – DavidF

如何使用Google Apps腳本執行jQuery DataTables服務器端數據

回答

相關問題