Dav*_*idF 0 jquery jquery-plugins google-apps-script
当数据在初始页面加载时提供时，DataTables 与 GAS HTMLService 配合得很好，但 GAS 的更好做法是“异步加载数据，而不是在模板中”。此外，数据表的服务器端处理为大型数据表提供了响应更快的 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" }
]
} );
} );
更一般地说：如何使用 GAS 实现 DataTAbles 服务器端处理。
简单的方法：一次获取所有数据。像这样
在 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中，ScriptDB 已经具备类似查询的功能
抱歉我的英语不好=）